/* ==================================================================
   Delux Enterijeri — Landing Page Generator
   Stil je zaključan na maketu koju je klijent odobrio:
   krem podloga + espresso hero + zlatni akcenat na ceni + crveni CTA.
   Tipografija je brendovska (Playfair Display + DM Sans, isto kao sajt).

   Dve svesne razlike od makete (traženo):
   1) Traka "REZERVIŠITE ODMAH" je FIKSIRANA za dno ekrana. Od 2026-08-03 je
      na TELEFONU skrivena dok su hero dugmad u kadru (ista radnja je inače
      pisala dvaput jedno ispod drugog); na širokom ekranu je i dalje uvek
      vidljiva, kako je prvobitno traženo.
   2) Futerska traka "bez rizika / sigurna kupovina / podrška" je uklonjena.
   ================================================================== */

:root {
  --espresso:    #2a1d15;
  --espresso-2:  #191007;
  --espresso-3:  #3b2a1f;
  --cream:       #faf7f2;
  --cream-2:     #f3eee5;
  --cream-3:     #e9e1d4;
  --paper:       #ffffff;
  --ink:         #1b1512;
  --ink-soft:    #6d6058;
  --ink-mute:    #9c8f84;
  --gold:        #b98f53;
  --gold-2:      #d5b587;
  --gold-soft:   #e8d9c1;
  --ok:          #3f9163;   /* potvrda — jedina zelena na strani */
  --red:         #c4212c;
  --red-2:       #a5151f;
  --line:        rgba(27, 21, 18, .12);
  --line-soft:   rgba(27, 21, 18, .06);
  --line-dark:   rgba(255, 255, 255, .14);

  --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --max: 1320px;
  --gut: 26px;
  --headh: 68px;
  --logo-w: 80px;  /* stvarna širina logotipa (visina 34px × odnos stranica) */
  /* Veličina crvene pločice sa popustom. Menja se SAMO ovaj broj — i slova i
     unutrašnji razmaci se skaliraju zajedno, pa pločica ostaje istih odnosa. */
  --ribbon: .9;
  /* Trajanje pojavljivanja sekcija pri skrolu — jedno mesto za štimovanje. */
  --reveal: 700ms;
  --barh: 106px;   /* visina fiksirane trake — body dobija isti padding-bottom */
  --r: 4px;
  /* Zaobljenje FOTOGRAFIJA — galerija i kartice srodnih artikala. Odvojeno od
     `--r` (dugmad, polja, kartice), jer slika podnosi jače zaobljenje nego
     kontrola: kod dugmeta isti radijus izgleda mekano, kod slike jedva. */
  --r-img: 8px;
  /* Zaobljenje KARTICE kao celine (bela kutija sa slikom i tekstom). Veće od
     `--r-img` jer je i sama površina veća — na kartici od 300 px isti radijus
     kao na dugmetu od 54 px izgleda kao da ga nema. */
  --r-card: 10px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Header je zalepljen za vrh, pa bi bez ovoga skok na #galerija odveo sekciju
   TAČNO pod header i naslov bi ostao sakriven. `scroll-margin-top` kaže
   browseru da ostavi toliko prostora iznad odredišta. Vrednost prati visinu
   headera, pa se menja sama kad se header promeni na mobilnom. */
[id] { scroll-margin-top: calc(var(--headh) + 16px); }
#top { scroll-margin-top: 0; }   /* početak strane ide skroz na vrh */

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.has-bar { padding-bottom: var(--barh); }

img, video { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
/* `padding: 0` je obavezan deo reseta. Browser dugmetu daje svoj padding
   (~2px 6px), pa je slika unutar `.gal__btn` bila 12 px uža od dugmeta —
   sa strane se videla podloga umesto fotografije, a zaobljenje je izgledalo
   kao da fali. Border je bio resetovan, padding nije. */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
s { text-decoration-thickness: 1px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px;
}
.skip:focus { left: 8px; top: 8px; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* Selekcija teksta u brendovskoj boji — svetla peščana podloga sa tamnim
   slovima čita se i na krem sekcijama i na tamnom hero panelu. */
::selection { background: var(--gold-soft); color: var(--ink); }
::-moz-selection { background: var(--gold-soft); color: var(--ink); }

/* ====================== POJAVLJIVANJE PRI SKROLU ===================
   Namerno uzdržano: 18 px pomaka, `--reveal` trajanje, jednom po sekciji. Radi SAMO
   pod `.js-reveal`, klasom koju <head> dodaje tek ako animacija može da se
   izvede — pa strana bez JS-a i uz `prefers-reduced-motion` prikazuje sve
   odmah, bez ijednog sakrivenog piksela.

   HERO NEMA ovu klasu i nikad se ne animira: cena i dugme moraju da budu tu
   u prvom kadru. Animiraju se samo sekcije ispod prvog ekrana.

   Samo `opacity` i `transform` — ne pomeraju raspored, pa nema poskakivanja
   sadržaja dok se strana učitava. */
.js-reveal .reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Stepenasto pojavljivanje UNUTAR sekcije.
   Sam pomak cele sekcije se jedva primeti — sekcija je široka koliko i ekran,
   pa 28 px izgleda kao da se ništa nije desilo. Ono što se VIDI je kad kartice
   uđu jedna za drugom. Kašnjenja su mala (do 0,3 s) da sadržaj ne kasni za
   čitaocem koji već skroluje dalje. */
.js-reveal .reveal :is(.trust__i, .gal__cell, .rel__cell, .spec__row, .vid__copy, .vid__player, .rev__card) {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity calc(var(--reveal) * .8) var(--ease),
              transform calc(var(--reveal) * .8) var(--ease);
}
.js-reveal .reveal.is-in :is(.trust__i, .gal__cell, .rel__cell, .spec__row, .vid__copy, .vid__player, .rev__card) {
  opacity: 1;
  transform: none;
}
.js-reveal .reveal.is-in :is(.trust__i, .gal__cell, .rel__cell, .spec__row, .rev__card):nth-child(1) { transition-delay: .06s; }
.js-reveal .reveal.is-in :is(.trust__i, .gal__cell, .rel__cell, .spec__row, .rev__card):nth-child(2) { transition-delay: .12s; }
.js-reveal .reveal.is-in :is(.trust__i, .gal__cell, .rel__cell, .spec__row, .rev__card):nth-child(3) { transition-delay: .18s; }
.js-reveal .reveal.is-in :is(.trust__i, .gal__cell, .rel__cell, .spec__row, .rev__card):nth-child(4) { transition-delay: .24s; }
.js-reveal .reveal.is-in :is(.trust__i, .gal__cell, .rel__cell, .spec__row, .rev__card):nth-child(n+5) { transition-delay: .30s; }
.js-reveal .reveal.is-in .vid__player { transition-delay: .10s; }

.preview-flag {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  background: #8a5b00; color: #fff; text-align: center;
  font-size: 11px; letter-spacing: .16em; padding: 5px;
}

/* ---------------------------- TIPOGRAFIJA ---------------------------
   Jedno pravilo za ceo sajt, da se strane ne razilaze:

     Playfair (`--display`), težina 600  →  NASLOVI i IMENA
     DM Sans (`--sans`)                  →  sve ostalo

   Do 2026-08-03 su naslovi sekcija bili sitan razvučen sans na strani
   artikla, a veliki Playfair na kategoriji — isti element, dva stila.
   Ujednačeno na Playfair, jer prati naslov hero-a na obe strane.
   -------------------------------------------------------------------- */
.sec-title {
  font-family: var(--display);
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  color: var(--ink);
  padding: clamp(30px, 3.6vw, 46px) var(--gut) clamp(20px, 2.6vw, 32px);
}
/* Kad ispod naslova ide podnaslov, razmak nosi podnaslov — inače se saberu. */
.sec-title--sub { padding-bottom: 0; }

/* ================================ DUGMAD =========================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px;
  padding: 0 20px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn__ico { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }

.btn--red { background: var(--red); color: #fff; }
.btn--ghost {
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
}
.btn--ghost.btn--dark { border-color: var(--line); color: var(--ink); }

/* ---------------------------- hover na dugmadi -----------------------
   Sve iza `hover: hover` — na dodirnim ekranima ta stanja ne postoje, a
   browseri ih posle tapa znaju „zalepiti" pa dugme ostane u hover izgledu.
   Pokret je namerno sitan: 2 px i senka. Veći skok na CTA-u koji nosi celu
   stranu deluje nervozno, ne premijum. */
@media (hover: hover) and (pointer: fine) {
  .btn--red:hover {
    background: var(--red-2);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(196, 33, 44, .28);
  }
  .btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; transform: translateY(-2px); }
  .btn--ghost.btn--dark:hover { background: var(--cream-2); border-color: var(--gold-soft); }

  /* Torba se blago podigne — sitan nagoveštaj radnje, ne cirkus. */
  .btn--red:hover .btn__ico { transform: translateY(-1.5px); }

  /* Slušalica „zazvoni" jednom. Ovo je jedina animacija koja nešto ZNAČI:
     ikona telefona koja se zaljulja govori šta dugme radi. */
  .btn--ghost:hover .btn__ico { animation: zvoni .5s var(--ease); }
}
@keyframes zvoni {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-11deg); }
  45%      { transform: rotate(9deg); }
  70%      { transform: rotate(-5deg); }
}

.btn--wide { width: 100%; }

.cta-row { display: flex; gap: 13px; flex-wrap: wrap; }
.cta-row .btn { flex: 1 1 180px; min-width: 0; }

/* ================================ HEADER =========================== */

.head {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}
.head__in {
  max-width: var(--max); margin: 0 auto;
  min-height: var(--headh);
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}
.head__brand { display: flex; align-items: center; }
.head__brand .logo { height: 34px; width: auto; }
.logo--dark { display: none; }   /* beli logo se koristi samo na tamnom mobilnom headeru */

/* Strana kategorije nema navigaciju, pa ni burger — red je onda logo levo,
   telefon desno. Sve ostalo (visina, pozadina, ponašanje na telefonu) ostaje
   isto, jer je to isto zaglavlje. */
.head--nonav .head__in { grid-template-columns: auto auto; justify-content: space-between; }

/* Strelica „nazad" levo u zaglavlju (strana politike privatnosti). Dodaje
   ćeliju ispred logotipa, pa red postaje: nazad — logo — (prazno) — telefon.
   Bez `1fr` ćelije bi se logo i telefon slepili uz strelicu. */
/* Tri ćelije: strelica, logo (rastegljiva, logo u njoj stoji levo), telefon
   na kraju. Sa četiri ćelije (`auto auto 1fr auto`) je telefon padao u
   rastegljivu i ostajao zalepljen uz logo umesto da ode desno. */
.head--nazad .head__in { grid-template-columns: auto 1fr auto; justify-content: initial; }
.head__nazad {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-left: -6px;
  border-radius: 50%;
  color: var(--ink);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.head__nazad svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .head__nazad:hover { background: var(--cream-2); color: var(--gold); transform: translateX(-2px); }
}

.nav {
  display: flex; justify-content: center; gap: clamp(18px, 2.6vw, 38px);
  font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.nav a { position: relative; padding: 6px 0; color: var(--ink); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px;
  height: 1px; background: var(--ink); transition: right .28s var(--ease);
}
.nav a:hover::after { right: 0; }

.head__tel {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 500; letter-spacing: .02em;
}
.head__tel-ico { width: 19px; height: 19px; color: var(--gold); flex: none; }
.head__tel:hover { color: var(--gold); }

.burger { display: none; width: 34px; height: 34px; padding: 7px 4px; }
.burger span {
  display: block; height: 1.6px; background: currentColor; border-radius: 2px;
  margin: 4px 0; transition: transform .25s var(--ease), opacity .2s;
}

/* ================================= HERO ============================ */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--espresso);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

.hero__media { position: relative; min-height: clamp(400px, 40vw, 560px); }
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%;
  /* Ambijentalna slika se stišava da toplina hero panela ostane dominantna
     (klijent je na v3 tražio tamniji hero — isti ton držimo i ovde). */
  filter: brightness(.86) saturate(1.06) contrast(1.02);
}
/* Hero slika je "sa pozadinom" (ambijent) — desna ivica se stapa u panel. */
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(26, 17, 7, .40) 0%, rgba(26, 17, 7, .12) 26%,
                           rgba(26, 17, 7, .10) 52%, var(--espresso) 100%),
    linear-gradient(180deg, rgba(26, 17, 7, .18) 0%, rgba(26, 17, 7, 0) 34%,
                            rgba(26, 17, 7, .22) 100%);
}
.hero__cap {
  position: absolute; z-index: 2; left: 0; bottom: 20px;
  background: rgba(20, 13, 6, .74);
  color: rgba(255, 255, 255, .92);
  font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase;
  padding: 8px 16px 8px calc(var(--gut) + 4px);
  backdrop-filter: blur(3px);
}

/* Pločica popusta je centrirana sa logotipom u headeru.
   `left` daje levu ivicu sadržajnog okvira (isto mesto od kog kreće header),
   a `transform` je pomera za pola logotipa udesno pa nazad za pola svoje
   širine — tako se poklapaju CENTRI, a ne ivice. Radi i kad je prozor uži od
   `--max`, jer se `left` tada svede na 0.
   `50%` umesto `50vw`: `vw` uključuje širinu scrollbara, pa bi na Windows-u
   pomerilo pločicu za nekoliko piksela. */
.hero__ribbon {
  position: absolute; z-index: 4; top: 0;
  left: max(0px, calc(50% - var(--max) / 2));
  transform: translateX(calc(var(--gut) + (var(--logo-w) / 2) - 50%));
  background: var(--red);
  color: #fff;
  padding: calc(15px * var(--ribbon)) calc(24px * var(--ribbon)) calc(16px * var(--ribbon));
  display: flex; flex-direction: column; align-items: center;
  gap: calc(6px * var(--ribbon));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}
.hero__ribbon-pct { font-size: calc(30px * var(--ribbon)); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.hero__ribbon-pct i { font-size: calc(16px * var(--ribbon)); font-style: normal; font-weight: 600; }
.hero__ribbon-txt {
  font-size: calc(9.5px * var(--ribbon)); font-weight: 600; letter-spacing: .12em; line-height: 1.32;
  text-transform: uppercase;
  /* `min-content`: kutija je široka tačno koliko NAJDUŽA REČ, pa se tekst
     prelama na razmacima i nikad ne izlazi izvan crvene površine.
     Ranije je stajalo `max-width: 8ch` — „RASPRODAJA" je bila 73 px u kutiji
     od 60 px, tekst je curio preko paddinga i pločica je delovala neuredno.
     Ovako radi za bilo koji tekst koji se upiše u panelu.

     Uz `min-content` kutija hvata TAČNO najdužu reč, pa je sa uskim
     paddingom tekst dodirivao ivice i pločica je delovala nepocentrirano
     iako je matematički bila. Zato je bočni padding povećan — slova su
     ostala iste veličine (--ribbon se ne dira), samo su dobila vazduh. */
  width: min-content;
  text-align: center;
}

.hero__panel { display: flex; align-items: center; padding: clamp(30px, 4vw, 56px) 0; }
.hero__panel-in {
  width: 100%;
  max-width: 600px;
  padding-right: var(--gut);
  padding-left: clamp(24px, 3vw, 46px);
}

/* Stoji UNUTAR H1 (vidi `inc/render.php`), pa mora sam da poništi sve što
   H1 nameće — veličinu, težinu, verzal i prored. Bez toga bi nadnaslov
   postao deo velikog verzalnog naslova. */
.hero__eyebrow {
  display: block;
  font-family: var(--display);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 6px;
}
/* Težina 600 — ista kao svi ostali Playfair naslovi na sajtu (vidi pravilo
   uz `.sec-title`). Ranije 500, dok je naslov kategorije bio 700: isti
   element u tri težine. */
.hero__name {
  font-family: var(--display);
  font-size: clamp(44px, 5.2vw, 74px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero__tag {
  font-size: clamp(14px, 1.15vw, 16px);
  color: rgba(255, 255, 255, .82);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* --- cena --- */
.price { display: flex; flex-direction: column; }
.price__old { font-size: 14px; color: rgba(255, 255, 255, .5); }
.price__now {
  font-family: var(--display);
  color: var(--gold-2);
  font-weight: 600;
  line-height: 1.06;
}
.price__save { color: var(--gold); letter-spacing: .04em; }
.price__note { color: rgba(255, 255, 255, .55); font-size: 12px; margin-top: 4px; }

.price--hero { margin-bottom: 22px; }
.price--hero .price__now { font-size: clamp(32px, 3.3vw, 46px); margin: 2px 0 5px; }
.price--hero .price__save { font-size: 12.5px; }

.hero__reassure {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 16px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .66);
}
.hero__reassure-ico { width: 15px; height: 15px; color: var(--gold); flex: none; }
.hero__reassure .dot { font-style: normal; color: var(--gold); }

/* ============================= TRUST TRAKA ========================= */

/* Markup: `inc/trust.php`. Dve varijante istog elementa — traka preko cele
   širine (strana artikla) i krem kutija sa zaobljenim uglovima
   (`.trust--box`, kategorija). Sve mere su zajedničke; razlikuje se samo
   okvir. Ranije su bile dve nezavisne kopije, pa su im se razišle ikona
   (27 vs 30 px), naslov (12 vs 13 px) i boja podnaslova. */
.trust { background: var(--cream); border-bottom: 1px solid var(--line-soft); }
.trust__in {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trust__item {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 18px;
  border-left: 1px solid var(--line-soft);
  min-width: 0;
}
.trust__item:first-child { border-left: 0; }
.trust__ico { width: 27px; height: 27px; color: var(--gold); flex: none; }
.trust__item strong {
  display: block; font-size: 12.5px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
}
.trust__item span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

/* Varijanta u kutiji: traka ne dodiruje ivice ekrana nego stoji kao kartica
   unutar sadržaja (tako je na maketi kategorije). */
.trust--box { background: transparent; border-bottom: 0; padding: 0 var(--gut) clamp(28px, 3.2vw, 44px); }
.trust--box .trust__in { background: #f6f3f0; border-radius: var(--r-card); padding: 0; }
.trust--box .trust__item { border-left-color: rgba(27, 21, 18, .09); }

/* ============================== GALERIJA =========================== */

.gal { background: var(--cream-2); padding-bottom: 30px; }
.gal__wrap { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

.gal__rail,
.rel__rail {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
  /* Prevlačenje prstom se zaustavlja u traci — bez ovoga povlačenje preko
     kraja pomera celu stranu ispod nje. */
  overscroll-behavior-x: contain;
}
/* Na DODIRNIM ekranima se `scroll-behavior: smooth` skida: ono se odnosi i na
   doterivanje posle prevlačenja, pa se prst i animacija otimaju o istu traku i
   listanje deluje trapavo i sporo. Strelice i dalje klize glatko — one traže
   `behavior: "smooth"` u samom pozivu, što ne zavisi od ovog pravila. */
@media (hover: none) {
  .gal__rail, .rel__rail { scroll-behavior: auto; }
}
.gal__rail::-webkit-scrollbar,
.rel__rail::-webkit-scrollbar { display: none; }

.gal__cell { flex: 0 0 calc((100% - 4 * 16px) / 5); scroll-snap-align: start; }
.gal__btn { display: block; width: 100%; overflow: hidden; background: var(--cream-3); border-radius: var(--r-img); }
.gal__btn img {
  /* `object-position: center` je i podrazumevano, ali stoji izričito: kadar
     se seče iz SREDINE, pa vertikalne fotografije ne gube glavni motiv. */
  width: 100%; height: 100%; aspect-ratio: 4 / 3.4;
  object-fit: cover; object-position: center;
  transition: transform .5s var(--ease);
}
.gal__btn:hover img { transform: scale(1.045); }

.rail-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(27, 21, 18, .16);
  transition: background-color .2s, color .2s;
}
.rail-nav svg { width: 18px; height: 18px; }
.rail-nav:hover { background: var(--ink); color: #fff; }
.rail-nav--prev { left: 4px; }
.rail-nav--next { right: 4px; }
.rail-nav[disabled] { opacity: .28; pointer-events: none; }

.gal__dots { display: flex; justify-content: center; gap: 6px; padding-top: 18px; }
.gal__dots i {
  display: block; width: 18px; height: 3px; border-radius: 2px;
  background: var(--cream-3);
  transition: background-color .25s;
}
.gal__dots i.on { background: var(--gold); }

/* ========================= VIDEO + HIGHLIGHT ======================= */

.vid { background: var(--cream); padding: clamp(34px, 4vw, 58px) 0; }
/* Odnos kolona je uzet sa makete: video 368px, tekst 235px, kartica 240px
   pri širini sadržaja od 923px — dakle 1.53 : 0.98 : 1. */
.vid__grid {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
  display: grid;
  grid-template-columns: minmax(0, 1.53fr) minmax(0, .98fr) minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 38px);
  align-items: start;
}
/* Bez videa ostaje samo kartica „zašto ovo" — centrira se umesto da visi
   uz levu ivicu sa praznom polovinom pored sebe. */
.vid__grid--novideo { grid-template-columns: minmax(0, 780px); justify-content: center; }

.vid__player {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--espresso-2);
  box-shadow: 0 18px 44px rgba(27, 21, 18, .14);
}
.vid__player video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Bez kontrola i bez interakcije — video je ambijentalni prikaz, ne plejer. */
  pointer-events: none;
  user-select: none;
}
.vid__player video::-webkit-media-controls,
.vid__player video::-webkit-media-controls-enclosure,
.vid__player video::-webkit-media-controls-panel { display: none !important; opacity: 0 !important; }

.vid__intro { margin-bottom: 18px; }
.vid__h {
  font-family: var(--display);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 600;
  margin-bottom: 6px;
}
.vid__sub { color: var(--ink-soft); font-size: 14px; }

.ticks { display: flex; flex-direction: column; gap: 11px; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; }
.ticks__ico { width: 17px; height: 17px; color: var(--gold); flex: none; margin-top: 3px; }

/* --- highlight kartica --- */
.hl {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: clamp(18px, 2vw, 26px);
}
.hl__eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 7px;
}
.hl__title {
  font-family: var(--display);
  font-size: clamp(19px, 1.75vw, 24px);
  font-weight: 600;
  line-height: 1.18;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: 12px;
}
.hl__body { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 14px; }
.hl .ticks--hl { margin-bottom: 16px; }
.hl .ticks--hl li { font-size: 13.5px; }

/* Na maketi krug sedi na gornjoj ivici slike i pola viri iznad nje, unutar
   širine slike — zato figura ima razmak odozgo, a krug negativan `top`. */
.hl__fig { position: relative; margin-top: 30px; }
.hl__fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); background: var(--cream-2); }
.hl__badge {
  position: absolute; right: 14px; top: -32px; z-index: 2;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: grid; place-content: center; text-align: center;
  box-shadow: 0 8px 22px rgba(164, 21, 31, .34);
}
.hl__badge em {
  display: block; font-style: normal;
  font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.hl__badge b { display: block; font-size: 22px; font-weight: 700; line-height: 1.05; }

/* ======================= DIMENZIJE + KOLIČINE ====================== */

.spec { background: var(--cream-2); padding: clamp(30px, 3.4vw, 50px) 0; }
.spec__grid {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 52px);
}
/* Crtežu je data širina kolone (1.25 : 1): skica je jedina slika u ovoj
   sekciji, a u ranijem odnosu je na 1280 px ispadala 293 px široka — mere na
   njoj su se jedva čitale. */
.spec__left { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; align-items: center; }
/* Bez crteža tabela mera zauzima celu levu kolonu. */
.spec__left--nodiag { grid-template-columns: 1fr; }
.spec__right { border-left: 1px solid var(--line); padding-left: clamp(24px, 3vw, 46px); }

.spec__label {
  font-size: 10px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mute);
  text-align: center; margin-bottom: 10px;
}
.spec__diagram { color: var(--ink-soft); }
/* Gornja granica širine: u jednokolonskom rasporedu (768 px) kolona crteža
   naraste na 713 px, pa bi se i slova mera naduvala na 32 px i crtež bi
   izgledao kao poster. */
.dim-svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.dim-svg .dim-line { stroke: var(--ink-mute); stroke-width: .7; }
.dim-svg .dim-body { stroke: var(--ink); stroke-width: 1.1; }
/* Strane elemenata su POPUNJENE — bez toga je crtež providan, pa se kroz
   sedište vidi zadnja ivica naslona i komad izgleda kao žičani splet. Popuna
   je boja podloge (ne bela), pa se ne vidi kao pravougaonik; gornja i bočna
   strana su nijansu tamnije, da se zna koja je strana napred. */
/* Tanja linija na telima (0,8 umesto 1): na crtežu od desetak delova svaka
   dodirna ivica nosi dve linije, pa puna debljina daje utisak nedovršene
   skice pune unutrašnjih crta. Oblik nose POPUNE, linija samo ivicu. */
.dim-svg .dim-f { stroke: currentColor; stroke-width: 0.8; }
.dim-svg .dim-f--front { fill: var(--cream); }
.dim-svg .dim-f--gore { fill: #efe9df; }
.dim-svg .dim-f--bok { fill: #e6dfd3; }
.dim-svg .dim-thin { stroke: var(--ink-mute); stroke-width: .7; }
.dim-svg .dim-txt {
  fill: var(--ink-soft); stroke: none;
  /* Veličina je u JEDINICAMA viewBox-a, ne u pikselima strane: crtež se u
     koloni od ~293 px smanjuje na 0,65, pa 20 jedinica daje ~13 px na ekranu.
     Sa ranijih 15 je ispadalo 7,9 px — mera koja se ne može pročitati. */
  font-family: var(--sans); font-size: 20px; letter-spacing: .01em;
}
/* Oznaka „POGLED ODOZGO" ispod tlocrta — sitna, da ne konkuriše merama. */
.dim-svg .dim-txt--mala {
  fill: var(--ink-mute); font-size: 13px; font-weight: 600; letter-spacing: .12em;
}

.spec__rows { display: flex; flex-direction: column; }
.spec__row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.spec__row:last-child { border-bottom: 0; }
.spec__row dt { color: var(--ink-soft); }
/* Vrednost SME da se prelomi. `nowrap` je ranije držao „cm" uz broj, ali je
   uz duži zapis mera red postajao širi od ekrana i cela strana je dobijala
   vodoravni skrol na 320 px. (Oznaka „(Š × D × V)" je 2026-08-06 uklonjena sa
   svih strana na zahtev, pa je zapis kraći — pravilo ostaje jer vrednost i
   dalje ume da bude duga.)

   Mesta gde prelom NE valja rešena su tvrdim razmakom u samoj vrednosti (vidi
   `lp_dim_lepo()` i uvoz), pa se lomi samo tamo gde je bezbedno. */
.spec__row dd { font-weight: 500; text-align: right; }

.spec__h {
  font-family: var(--display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  margin-bottom: 10px;
}
.spec__body { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 20px; }

.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.feats li { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; }
.feats__ico { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 2px; }

/* =============================== SRODNO ============================ */

.rel { background: var(--cream); padding-bottom: clamp(30px, 3.4vw, 48px); }
.rel__wrap { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.rel__cell { flex: 0 0 calc((100% - 4 * 16px) / 5); scroll-snap-align: start; }

.card { display: block; height: 100%; }
.card__media {
  position: relative; overflow: hidden; background: var(--cream-3);
  /* Ista skala kao slike u galeriji i kartice u kategoriji — ranije je ovde
     stajao `--r` (radijus kontrole), pa je ista fotografija na dve strane
     sajta imala dva različita zaobljenja. */
  border-radius: var(--r-img);
}
.card__media img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3.1;
  object-fit: cover; object-position: center;
  transition: transform .5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.045); }
.card__badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 2px;
}
.card__body { padding: 12px 2px 0; }
.card__kind { display: block; font-size: 12.5px; color: var(--ink-soft); }
.card__model {
  display: block; font-family: var(--display); font-size: 16px; font-weight: 600;
  line-height: 1.2; margin-bottom: 6px;
}
.card__price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.card__price b { color: var(--red); font-size: 14.5px; font-weight: 700; }
.card__price s { color: var(--ink-mute); font-size: 12.5px; }

.allcard {
  height: 100%;
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-img);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 22px 16px;
}
.allcard__ico { width: 30px; height: 30px; color: var(--gold); }
.allcard p {
  font-size: 11.5px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; line-height: 1.5; color: var(--ink-soft);
}
.allcard__btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 10px 16px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  border-radius: var(--r);
  transition: background-color .2s, color .2s;
}
.allcard__btn svg { width: 14px; height: 14px; }
.allcard__btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* =============================== FUTER =============================
   ISTI na strani artikla i na strani kategorije (markup: `inc/footer.php`).
   Do 2026-08-03 su bila dva — tanki krem red ovde i široki tamni na
   kategoriji — pa je isti sajt imao dva različita dna. Ujednačeno je na
   široki: nosi kontakt, radno vreme i linkove, što je na prodajnoj strani
   korisnije od jednog reda sa autorskim pravima.
   ================================================================== */

.foot { background: #232323; color: #b3aeaa; }
.foot__in {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(34px, 4vw, 56px) var(--gut) clamp(28px, 3.4vw, 44px);
  display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: clamp(26px, 4vw, 60px);
}
.foot__in--2 { grid-template-columns: 1.35fr 1fr; }

.foot__brand img { height: 34px; width: auto; margin-bottom: 18px; }
.foot__word {
  display: block; margin-bottom: 18px; color: #fff;
  font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: .14em;
}
.foot__brand p { font-size: 14px; line-height: 1.9; max-width: 340px; }

/* ==================== DRUŠTVENE MREŽE U DNU STRANE ====================
   U BREND koloni futera, ispod teksta o firmi — uz logo i opis, jer je profil
   na mreži deo bloka „ko smo mi".

   Dve ranije pozicije nisu radile: zasebna svetla traka iznad futera izgledala
   je kao naknadno zalepljena, a red preko cele širine futera je pod dve levo
   poravnate kolone uvodio treću, centriranu osu — pa se nije uklapao.
   ==================================================================== */
/* Blok se PRITISKA NA DNO kolone, da mu se donja ivica poklopi sa poslednjim
   redom podataka o firmi (radno vreme) u koloni pored. Brend kolona je inače
   kraća, pa je blok visio na sredini i dve kolone su se završavale na dve
   različite visine.

   Radi samo dok su kolone jedna pored druge — u jednokolonskom rasporedu
   (ispod 560 px) `auto` nema šta da gura, pa razmak nosi pravilo u toj tački. */
/* `align-items: flex-start` je OBAVEZAN uz flex kolonu: bez njega se deca
   razvuku na punu širinu, pa je logo (`width: auto`) skočio u sredinu kolone. */
.foot__brand { display: flex; flex-direction: column; align-items: flex-start; }
.foot__soc { margin-top: auto; padding-top: 26px; }
/* Ispod 1024 px brend blok ide preko cele širine (`grid-column: 1 / -1`), pa
   kolone više nisu jedna pored druge i nema šta da se poravnava — `auto` tada
   sam po sebi nema efekta. */
/* ISTI kao naslov kolone „PODACI KOMPANIJE" (`.foot__col h3`): ista veličina,
   težina, razmak slova, boja i razmak ispod. Dva naslova u istom redu dna
   strane koja se razlikuju u bilo čemu čitaju se kao dva različita nivoa —
   jedan kao naslov, drugi kao potpis. */
.foot__soc-t {
  display: block; margin-bottom: 20px;
  font-size: 14px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #fff;
}

.soc { display: flex; gap: 13px; }
/* Krug je OBRIS, ne puna podloga: četiri pune sive tačke u nizu na tamnom
   futeru izgledaju teško, a obris ostavlja da se vidi sama ikona. Boja stiže
   tek na hover. */
.soc a {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .20);
  color: #cfc9c4;
  display: grid; place-items: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}
.soc__i { width: 21px; height: 21px; }
@media (hover: hover) and (pointer: fine) {
  .soc a:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-2px); }
}

.foot__col h3 { font-size: 14px; font-weight: 600; letter-spacing: .1em; color: #fff; margin-bottom: 20px; }
.foot__col li + li { margin-top: 14px; }
.foot__col a { font-size: 14.5px; transition: color .2s var(--ease); }
.foot__col a:hover { color: #fff; }
/* Naziv pravnog lica stoji IZNAD spiska, bez ikone — on nije kontakt nego
   zaglavlje ostalih podataka. */
.foot__co { color: #fff; font-size: 14.5px; font-weight: 600; margin-bottom: 14px; }
.foot__c li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.55; }
/* MB i PIB u jednom redu. Prelamaju se zajedno kad kolona postane uska, pa
   crta nikad ne ostane sama na početku reda. */
.foot__ids { display: flex; flex-wrap: wrap; gap: 0 8px; }
.foot__sep { font-style: normal; color: #6f6a66; }
.foot__ico { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 3px; }

.foot__bar {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding: 20px var(--gut);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; font-size: 13.5px; color: #8e8985;
}
/* Prvi red: autorska prava i pravni linkovi. Razmak je veći nego između reči,
   da se tri stavke ne slepe u jednu rečenicu. */
.foot__bar-red { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
/* Drugi red: napomena o rasprodaji. Sitnija i uža — nije pravni tekst nego
   objašnjenje, pa ne treba da se čita u istom dahu sa autorskim pravima. */
.foot__note { color: #6f6a66; font-size: 12.5px; max-width: 66ch; line-height: 1.6; }

/* Adresa u futeru vodi na mapu. Podvučena je tek na hover — u koloni kontakta
   stoje i telefon i mejl kao linkovi, pa bi tri stalne podvlake bile šum. */
.foot__map { border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), color .2s var(--ease); }
.foot__map:hover { color: var(--gold-2); border-bottom-color: currentColor; }

/* ====================== FIKSIRANA TRAKA (dno) ====================== */
/* Uvek zakačena za dno viewport-a. NE pojavljuje se na skrol —
   vidljiva je od prvog piksela strane. */

.bar {
  position: fixed; z-index: 60;
  left: 0; right: 0; bottom: 0;
  min-height: var(--barh);
  background: var(--espresso-2);
  color: #fff;
  border-top: 1px solid var(--line-dark);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .26);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bar__in {
  max-width: var(--max); margin: 0 auto;
  min-height: var(--barh);
  padding: 14px var(--gut);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
}
.bar__lead { display: flex; align-items: center; gap: 16px; }
.bar__ico { width: 30px; height: 30px; color: var(--gold); flex: none; }
.bar__txt strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.2;
}
.bar__txt span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .66); line-height: 1.42; }

.price--bar { text-align: right; }
.price--bar .price__old { font-size: 13px; }
.price--bar .price__now { font-size: clamp(24px, 2.4vw, 34px); }
.price--bar .price__save { font-size: 11.5px; }

.bar .cta-row { flex-wrap: nowrap; }
.bar .cta-row .btn { flex: 0 0 auto; min-height: 50px; }

/* ============================== MODAL ==============================
   Jedan markup, dva ponašanja:
   - telefon: „bottom sheet" — izlazi odozdo preko strane, sa ručkom za
     prevlačenje. Ne otvara novu stranu, pa se kupac ne gubi.
   - desktop: dijalog u dve kolone, levo slika i razlozi poverenja.
     Obe kolone su ćelije istog grida (`align-items: stretch` je podrazumevano),
     pa su UVEK iste visine — leva se rasteže sa desnom i deluje kao jedna
     ploča. To je bilo pokvareno na maketi.
   ================================================================== */

.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 13, 6, .66); backdrop-filter: blur(4px);
  animation: modalFade .32s ease both;
}
@keyframes modalFade {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(4px); }
}

.modal__box {
  position: relative; z-index: 1;
  width: min(560px, 100%);
  max-height: min(88vh, 780px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
  animation: modalIn .42s cubic-bezier(.18, .9, .28, 1) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------ zatvaranje ---------------------------
   Modal je do sada NESTAJAO — `hidden = true` i to je to. Otvaranje je bilo
   animirano, zatvaranje trzaj. JS dodaje `.is-closing`, sačeka animaciju pa
   tek onda sakrije (vidi js/script.js). */
.modal.is-closing .modal__backdrop { animation: modalFade .22s ease reverse both; }
.modal.is-closing .modal__box { animation: modalOut .22s cubic-bezier(.4, 0, 1, .6) both; }
@keyframes modalOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px) scale(.98); }
}

.modal__x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-mute);
}
.modal__x svg { width: 18px; height: 18px; }
.modal__x:hover { background: var(--cream-2); color: var(--ink); }

/* --------------------------- dijalog rezervacije --------------------- */

/* Sadržaj ulazi u nizu, isto kao na ekranu potvrde — dijalog tako deluje kao
   da se sklapa, a ne kao da je bačen na ekran. Kašnjenja su kratka (do 0,3 s)
   da forma ne kasni za korisnikom koji je već krenuo da kuca.

   Ciljaju se IMENOVANI delovi, ne `> *`: prvih trinaest dece forme su skrivena
   polja (slug, parametri kampanje, honeypot), pa bi `nth-child` kašnjenja
   potrošio na njih, a vidljiva polja bi ušla sva odjednom.
   Lanac `~` daje svakom sledećem polju veće kašnjenje bez brojanja. */
/* `backwards`, NE `both`: sa `both` animacija posle završetka zamrzne svoj
   poslednji kadar (`transform: none`) i time NADJAČA `:hover` na dugmetu —
   senka se pojavi, ali dugme ne može da se podigne. `backwards` drži samo
   početni kadar tokom kašnjenja, a posle vraća element u normalno stanje. */
.modal__head,
.rform > .fld,
.rform > .intents,
.rform > .btn,
.rform__ok,
.rform__consent {
  animation: rmodalUp .42s var(--ease) backwards;
}
.modal__head                    { animation-delay: .06s; }
.rform > .fld                   { animation-delay: .12s; }
.rform > .fld ~ .fld            { animation-delay: .17s; }
.rform > .fld ~ .fld ~ .fld     { animation-delay: .22s; }
.rform > .intents               { animation-delay: .26s; }
.rform > .btn                   { animation-delay: .30s; }
.rform__ok, .rform__consent     { animation-delay: .34s; }

@keyframes rmodalUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Pri zatvaranju sve nestaje odjednom — stepenasto gašenje se čita kao
   zaglavljivanje, ne kao namera. */
.modal.is-closing .modal__head,
.modal.is-closing .rform > .fld,
.modal.is-closing .rform > .intents,
.modal.is-closing .rform > .btn,
.modal.is-closing .rform__ok,
.modal.is-closing .rform__consent { animation: none; }

.rmodal { width: min(880px, 100%); padding: 0; overflow: hidden; }
.rmodal__main { position: relative; padding: clamp(22px, 3vw, 34px); overflow-y: auto; }

/* Leva kolona. `display: none` na telefonu — tamo je prostor za formu, ne
   za ukras; razlozi poverenja se na telefonu vide ispod dugmeta. */
.rmodal__aside { display: none; }

.rmodal__grip { display: none; }

/* Zaglavlje: ikona + naslov, kao na maketi. */
.modal__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; padding-right: 34px; }
.modal__ico {
  width: 44px; height: 44px; flex: none; padding: 11px;
  border-radius: 50%; background: var(--cream-2); color: var(--gold);
}
.modal__head h2 { font-family: var(--display); font-size: clamp(20px, 2.2vw, 25px); font-weight: 600; line-height: 1.22; }
.modal__sub { font-size: 13.5px; color: var(--ink-soft); margin-top: 5px; }

/* --------------------------------- forma ---------------------------- */

.rform { display: grid; gap: 11px; }
.rform[hidden], .modal__head[hidden] { display: none; }

/* Naziv polja postoji za čitače ekrana, ali se ne vidi — vidi se placeholder. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fld { display: flex; flex-direction: column; gap: 6px; }
.fld__in { position: relative; display: block; }
.fld__ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-mute); pointer-events: none;
  transition: color .2s var(--ease);
}
.fld input, .fld textarea {
  font: inherit; font-size: 14.5px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fld__in input { padding-left: 42px; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-mute); }
.fld input:focus, .fld textarea:focus {
  border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 3px rgba(185, 143, 83, .15);
}
.fld__in:focus-within .fld__ico { color: var(--gold); }
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: var(--red); }
.fld__in:has(input[aria-invalid="true"]) .fld__ico { color: var(--red); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------ šta dalje --------------------------- */

.intents { display: grid; gap: 9px; border: 0; padding: 0; margin: 3px 0 2px; }
.intent {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 13px;
  border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.intent:hover { border-color: var(--gold-soft); background: var(--cream); }
.intent input { position: absolute; opacity: 0; width: 0; height: 0; }
.intent__box {
  width: 19px; height: 19px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--line); border-radius: 3px;
  background: var(--paper);
  display: grid; place-items: center;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.intent__tick { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .18s var(--ease), transform .18s var(--ease); }
/* Zlatno, ne crveno. Crveno je na ovoj strani rezervisano za JEDNU radnju —
   dugme „Pošalji rezervaciju". Kad i kutija bude crvena, dva crvena elementa
   se takmiče i oko ne zna šta je glavno. Na maketi je štiklirano zlatno. */
.intent input:checked + .intent__box { background: var(--gold); border-color: var(--gold); }
.intent input:checked + .intent__box .intent__tick { opacity: 1; transform: none; }
.intent input:focus-visible + .intent__box { outline: 2px solid var(--gold); outline-offset: 2px; }
.intent:has(input:checked) { border-color: var(--gold-soft); background: var(--cream); }
.intent__txt { display: grid; gap: 2px; min-width: 0; }
.intent__txt strong { font-size: 14px; font-weight: 600; }
.intent__txt small { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }

/* Obavezan pristanak nije označen — kutija se crveni tek posle pokušaja
   slanja, ne unapred. Forma ne sme da viče na kupca pre nego što pogreši. */
.intent.is-bad { border-color: var(--red); background: rgba(196, 33, 44, .05); }
.intent.is-bad .intent__box { border-color: var(--red); }
.intents__msg { grid-column: 1 / -1; font-size: 12.5px; color: var(--red); line-height: 1.5; }
.intents__msg[hidden] { display: none; }

/* ---------------------------- ispod dugmeta -------------------------- */

.rform__msg { font-size: 13px; color: var(--red); min-height: 1px; }
.rform__msg:empty { display: none; }

/* Ikona je UNUTAR teksta (`display: inline`), ne pored njega — tako se ceo
   blok centrira kao jedna celina i izgleda isto na telefonu i na desktopu.
   Sa `flex` je ikona ostajala prilepljena uz levu ivicu, pa je na širem
   ekranu blok delovao pomeren. */
.rform__ok {
  text-align: center;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
}
.rform__ok-ico {
  display: inline-block; vertical-align: -2px;
  width: 14px; height: 14px; margin-right: 6px;
  color: var(--gold);
}
.rform__consent { font-size: 11px; color: var(--ink-mute); line-height: 1.5; text-align: center; }

/* ------------------------- potvrda rezervacije ------------------------- */

.rform__done { text-align: center; padding: 4px 0 2px; }
.rform__done[hidden] { display: none; }

/* Svaki deo ulazi sa svojim kašnjenjem (`--d` je u HTML-u). */
.is-in .done__t, .is-in .done__p, .is-in .done__item,
.is-in .done__mail, .is-in .done__cta, .is-in .done__hint {
  /* `backwards` iz istog razloga kao u dijalogu — `both` bi zamrzao
     `transform: none` i ubio hover na dugmetu za poziv. */
  animation: doneUp .55s cubic-bezier(.22, .8, .3, 1) backwards;
  animation-delay: var(--d, 0s);
}
@keyframes doneUp {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* --- kvačica koja se iscrtava --- */
.done__mark { width: 76px; height: 76px; margin: 6px auto 18px; position: relative; }
.is-in .done__mark::after {                /* prsten koji se jednom raširi */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--ok);
  animation: donePulse 1.1s ease-out .15s both;
}
@keyframes donePulse {
  from { opacity: .55; transform: scale(.8); }
  to   { opacity: 0;   transform: scale(1.45); }
}
.done__mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.done__ring, .done__tick {
  fill: none; stroke: var(--ok);
  stroke-linecap: round; stroke-linejoin: round;
}
.done__ring {
  stroke-width: 1.5; opacity: .55;
  stroke-dasharray: 145; stroke-dashoffset: 145;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
.done__tick {
  stroke-width: 2.6;
  stroke-dasharray: 36; stroke-dashoffset: 36;
}
.is-in .done__ring { animation: doneDraw .7s cubic-bezier(.65, 0, .35, 1) .05s forwards; }
.is-in .done__tick { animation: doneDraw .4s cubic-bezier(.65, 0, .35, 1) .5s forwards; }
@keyframes doneDraw { to { stroke-dashoffset: 0; } }

.rform__done h3 { font-family: var(--display); font-size: 25px; font-weight: 600; margin-bottom: 8px; }
.done__p { font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; }

/* --- šta je rezervisano: potvrda bez ponavljanja unetih podataka --- */
.done__item {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--cream-2); border: 1px solid var(--line-soft); border-radius: var(--r);
}
.done__item img { width: 62px; height: 48px; object-fit: cover; border-radius: 3px; flex: none; }
.done__item > div { display: grid; gap: 1px; min-width: 0; }
.done__kind { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); }
.done__name { font-family: var(--display); font-size: 17px; font-weight: 600; }
.done__price { font-size: 13.5px; font-weight: 600; color: var(--gold); }
.done__cta { margin-top: 2px; }

.done__mail {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft); margin-bottom: 16px;
}
.done__mail[hidden] { display: none; }
.done__mail b { color: var(--ink); font-weight: 600; word-break: break-all; }
.done__mail-ico { width: 15px; height: 15px; color: var(--ok); flex: none; }

/* „Ako Vam je hitno, pozovite nas direktno." — ispod dugmeta na potvrdi. */
.done__hint {
  animation: doneUp .55s cubic-bezier(.22, .8, .3, 1) backwards; animation-delay: var(--d, 0s);
  font-size: 12px; color: var(--ink-mute); margin-top: 10px;
}

/* Bez animacije (podešavanje sistema) sadržaj mora biti odmah vidljiv —
   `stroke-dashoffset` se vraća na 0, inače bi kvačica ostala neiscrtana. */
@media (prefers-reduced-motion: reduce) {
  /* Modal i dugmad: nikakav pokret, ali sve mora da OSTANE vidljivo — zato
     `animation: none`, a ne gašenje pravila koje bi ostavilo `opacity: 0`. */
  .modal__box, .modal__backdrop, .rmodal__img,
  .modal__head, .rform > .fld, .rform > .intents,
  .rform > .btn, .rform__ok, .rform__consent { animation: none !important; }
  .modal.is-closing .modal__box, .modal.is-closing .modal__backdrop { animation: none !important; }
  .btn, .btn__ico { transition: none; }
  .nav { transition: visibility 0s; }
  .head.open .nav a { animation: none !important; }
  .btn--red:hover, .btn--ghost:hover { transform: none; }
  .btn--ghost:hover .btn__ico { animation: none; }

  .is-in .done__t, .is-in .done__p, .is-in .done__item,
  .is-in .done__mail, .is-in .done__cta, .is-in .done__hint { animation: none; }
  .is-in .done__mark::after { animation: none; opacity: 0; }
  .is-in .done__ring, .is-in .done__tick { animation: none; }
  .done__ring, .done__tick { stroke-dashoffset: 0; }
}

/* ============================= LIGHTBOX ============================ */

.lb { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 4vmin; background: rgba(16, 10, 4, .93); }
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: 92vh; object-fit: contain; border-radius: var(--r); }
/* PUN SVETLI KRUG sa senkom, isto kao strelice u galeriji na strani.
   Prozirna kružnica (svetla ili tamna, svejedno) nestaje čim iza nje dođe
   ploha slične svetline — a ovde iza može biti i tamna podloga i svetla
   fotografija. Pun krug + senka se vide na oboje. */
.lb__x {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  display: grid; place-items: center;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lb__x svg { width: 20px; height: 20px; }
.lb__x:hover { background: var(--ink); color: #fff; }

/* Listanje u lightboxu. Krug je isti kao dugme za zatvaranje — jedan jezik
   kontrola. Strelice stoje uz ivice, ne uz sliku: slika menja širinu od kadra
   do kadra, pa bi dugmad poskakivala. */
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  display: grid; place-items: center;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lb__nav:hover { background: var(--ink); color: #fff; }
.lb__nav[hidden] { display: none; }
.lb__nav svg { width: 22px; height: 22px; }
.lb__nav--prev { left: 16px; }
.lb__nav--next { right: 16px; }

/* Promena slike: kratko utapanje, bez pomeranja — pomeranje bi na dodir
   ličilo na prevlačenje koje korisnik nije napravio. */
.lb img { transition: opacity .18s var(--ease); }
.lb.is-menja img { opacity: 0; }

@media (max-width: 720px) {
  /* Na telefonu se lista prevlačenjem; strelice su manje i bliže ivici, da ne
     stoje preko slike. */
  .lb__nav { width: 40px; height: 40px; }
  .lb__nav--prev { left: 6px; }
  .lb__nav--next { right: 6px; }
}

/* ============================= RESPONSIVE ========================== */

/* ============== DIJALOG REZERVACIJE: DESKTOP (dve kolone) ==========
   Ovde je bio bag sa makete: leva ploča sa slikom nije išla do dna, pa je
   dijalog izgledao kao dva zalepljena parčeta. Rešenje je da obe kolone budu
   ćelije ISTOG grida — grid podrazumevano rasteže ćelije na visinu reda
   (`align-items: stretch`), pa leva kolona sama prati visinu forme, kolika
   god ona bila. Slika drži svoj odnos stranica, a krem podloga popunjava
   ostatak, tako da je ploča uvek jedna celina.
   ================================================================== */
@media (min-width: 861px) {
  .rmodal--split { display: grid; grid-template-columns: 302px minmax(0, 1fr); }

  .rmodal__aside {
    display: flex; flex-direction: column;
    background: var(--cream-2);
    border-right: 1px solid var(--line-soft);
    min-height: 100%;                 /* prati visinu reda, ne sadržaja */
  }
  /* Slika RASTE i popunjava sve što razlozi poverenja ne zauzmu. Da je
     fiksne visine, kod duže forme bi ispod nje ostala prazna krem površina i
     ploča bi opet izgledala kao dva parčeta. */
  .rmodal__img {
    width: 100%; flex: 1 1 auto; min-height: 200px; height: 100%;
    object-fit: cover; object-position: center;
    /* SAMO prelaz kroz prozirnost, bez `scale`.
       Ranije je slika išla 1.07 -> 1 u 0,8 s, dok kutija ide 0.97 -> 1 u
       0,42 s — dva skaliranja u SUPROTNIM smerovima i različitog trajanja.
       Dok se preklapaju međusobno se poništavaju, a posle 0,42 s se slika
       nastavi skupljati sama; to se na fotografiji vidi kao razvlačenje pa
       vraćanje. Trajanje je izjednačeno sa kutijom da sve stane u istom
       trenutku. */
    animation: rmodalFoto .42s var(--ease) backwards;
  }
  @keyframes rmodalFoto {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .modal.is-closing .rmodal__img { animation: none; }
  .rmodal__points {
    display: grid; gap: 15px;
    padding: 20px 20px 22px;
    flex: none;
  }
  .rmodal__points li {
    display: flex; align-items: center; gap: 12px;
    font-size: 12.5px; line-height: 1.4; color: var(--ink-soft);
  }
  /* Ikona stoji u svetloj pločici (kao na maketi) — na krem podlozi sama
     ikona se gubi, a pločica joj daje težinu i poravnava tri reda. */
  .rmodal__pico {
    width: 32px; height: 32px; flex: none; padding: 8px;
    border-radius: 50%; background: var(--paper); color: var(--gold);
    box-shadow: 0 1px 2px rgba(27, 21, 18, .06);
  }

  .rmodal__main { max-height: min(88vh, 780px); }

  /* Na maketi su izbori jedan PORED drugog — dijalog je širok, nema razloga
     da troše dve pune visine. Na telefonu ostaju jedan ispod drugog. */
  .intents { grid-template-columns: 1fr 1fr; }
}

/* =============== DIJALOG REZERVACIJE: TELEFON (bottom sheet) =======
   Izlazi odozdo PREKO strane — ne otvara novu i ne gubi kupca sa artikla.
   Ručka na vrhu se prevlači nadole da se zatvori (vidi js/script.js).
   ================================================================== */
@media (max-width: 860px) {
  .modal { place-items: end center; padding: 0; }

  .modal__box {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    animation: sheetUp .4s cubic-bezier(.2, .9, .25, 1) both;
  }
  @keyframes sheetUp {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
  /* Sheet izlazi nadole, ne bledi u mestu — pokret prati mesto odakle je došao. */
  .modal.is-closing .modal__box { animation: sheetDown .24s cubic-bezier(.4, 0, 1, .6) both; }
  @keyframes sheetDown {
    from { transform: none; }
    to   { transform: translateY(100%); }
  }

  .rmodal__main { padding: 8px 18px 22px; }

  .rmodal__grip {
    display: block; width: 100%; padding: 8px 0 12px;
    touch-action: none;               /* prevlačenje hvata JS, ne skrol */
  }
  .rmodal__grip span {
    display: block; width: 42px; height: 4px; margin: 0 auto;
    border-radius: 99px; background: var(--cream-3);
  }
  /* Dok se prevlači, prati prst bez animacije. */
  .modal__box.is-drag { animation: none; transition: none; }

  .modal__x { top: 8px; right: 8px; }
  .modal__head { margin-bottom: 16px; }
  .modal__ico { width: 40px; height: 40px; padding: 10px; }

  .fld input, .fld textarea { font-size: 16px; }   /* ispod 16px iOS zumira */
  .intent { padding: 11px 12px; }
}

@media (max-width: 1180px) {
  .gal__cell { flex-basis: calc((100% - 3 * 16px) / 4); }
  .rel__cell { flex-basis: calc((100% - 3 * 16px) / 4); }
  .vid__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .hl { grid-column: 1 / -1; }
  .vid__grid--novideo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  :root { --gut: 20px; }

  /* Futer: tri kolone se ne uklapaju ispod ~1000 px — brend ide preko cele
     širine, a preostale dve kolone dele red. */
  .foot__in, .foot__in--2 { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }

  .burger { display: block; }
  .head__in { grid-template-columns: auto 1fr auto; }
  .head__brand { justify-content: center; }

  /* Mobilni/tablet header je tamna traka (kao na maketi). */
  .head { background: var(--espresso); border-bottom-color: var(--line-dark); color: #fff; }
  .logo--light { display: none; }
  .logo--dark { display: block; }
  /* Na telefonu ostaje samo ikona telefona — i sa navigacijom i bez nje.
     Ranije je kategorija (bez burgera) zadržavala i broj, uz obrazloženje da
     prostor postoji; traženo je da zaglavlje bude ISTO na obe strane, pa
     izuzetak ide napolje. */
  .head__tel-num { display: none; }

  /* Bez burgera fali leva ćelija, pa bi logo skliznuo ulevo. Prazan `::before`
     TAČNO širine burgera vraća isti raspored kao na strani artikla — ne samo
     „logo na sredini" nego ista geometrija reda, pa logo pri prelasku sa jedne
     strane na drugu ne poskoči. Bez dodatnog praznog elementa u markupu.
     Van ovog bloka `::before` ne postoji, pa desktop ostaje na dve ćelije. */
  .head--nonav .head__in { grid-template-columns: auto 1fr auto; justify-content: initial; }
  .head--nonav .head__in::before { content: ""; width: 34px; }
  /* Kad postoji strelica „nazad", ona JE ta prva ćelija — prazan razmak bi
     dodao četvrtu i izbacio logo iz sredine. Na tamnom mobilnom zaglavlju
     strelica je bela, kao i telefon. */
  .head--nazad .head__in { grid-template-columns: auto 1fr auto; }
  .head--nazad .head__in::before { display: none; }
  .head__nazad { color: #fff; margin-left: -8px; }
  .head__tel { color: #fff; }
  .nav a { color: #fff; }
  .nav a::after { background: #fff; }

  /* ------------------------- mobilni meni ---------------------------
     Panel se SPUŠTA odozgo, ne pojavljuje se. Zato `.nav` ostaje u dokumentu
     i u zatvorenom stanju (ranije je bio `display: none`, a `display` se ne
     može animirati) — sakriva ga `clip-path`, koji otkriva panel odozgo
     nadole, uz `visibility` da zatvoren meni ne hvata Tab ni čitače ekrana.
     ================================================================= */
  .nav {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--espresso);
    border-bottom: 1px solid var(--line-dark);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .32);
    padding: 8px var(--gut) 18px;
    gap: 0;

    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-6px);
    transition: clip-path .34s var(--ease), transform .34s var(--ease),
                visibility 0s .34s;
  }
  .head.open .nav {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transform: none;
    transition: clip-path .34s var(--ease), transform .34s var(--ease),
                visibility 0s;
  }

  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line-dark); }

  /* Stavke ulaze jedna za drugom — panel deluje kao da se rasklapa.
     `backwards`, ne `both`: `both` bi posle animacije zamrznuo poslednji kadar
     i pobedio hover/aktivna stanja na linku. */
  .head.open .nav a {
    animation: navStavka .32s var(--ease) backwards;
  }
  .head.open .nav a:nth-child(1) { animation-delay: .06s; }
  .head.open .nav a:nth-child(2) { animation-delay: .10s; }
  .head.open .nav a:nth-child(3) { animation-delay: .14s; }
  .head.open .nav a:nth-child(4) { animation-delay: .18s; }
  .head.open .nav a:nth-child(n+5) { animation-delay: .22s; }
  @keyframes navStavka {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }

  .head.open .burger span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
  .head.open .burger span:nth-child(2) { opacity: 0; }
  .head.open .burger span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

  .hero { grid-template-columns: 1fr; }
  .hero__media { min-height: clamp(260px, 46vw, 400px); }
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(26, 17, 7, .3) 0%, rgba(26, 17, 7, 0) 40%,
                              rgba(26, 17, 7, .5) 76%, var(--espresso) 100%);
  }
  /* Oznaka ide na DNO slike. U gornjem desnom uglu je na telefonu delila red
     sa crvenom pločicom (104 px + 262 px na 375 px ekrana) i sve je izgledalo
     stisnuto. Dole ima ceo red za sebe. */
  .hero__cap { top: auto; bottom: 14px; left: 0; right: auto; padding: 7px 14px 7px var(--gut); }
  .hero__ribbon { left: 0; transform: none; }
  .hero__panel { padding: 4px 0 clamp(26px, 5vw, 40px); }
  .hero__panel-in { max-width: none; padding-left: var(--gut); padding-right: var(--gut); }

  .trust__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__item { border-left: 0; border-top: 1px solid var(--line-soft); padding: 16px 6px; }
  .trust__item:nth-child(-n+2) { border-top: 0; }
  /* U kutiji ivice ne smeju da dodiruju zaobljene uglove, pa unutrašnji
     razmak ostaje i na dva stupca. */
  .trust--box .trust__item { padding: 16px 14px; border-top-color: rgba(27, 21, 18, .09); }

  .spec__grid { grid-template-columns: 1fr; }
  .spec__left { grid-template-columns: 1fr; }
  .spec__right { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 26px; }

  /* `display: contents` pušta intro/listu u isti grid kao plejer, pa mogu
     da se preurede: naslov gore, plejer, pa lista. */
  .vid__grid { grid-template-columns: 1fr; }
  .vid__copy { display: contents; }
  .vid__intro { order: -1; margin-bottom: 0; }
  .vid__player { order: 0; }
  .vid__list { order: 1; }
  .hl { order: 2; }
}

@media (max-width: 720px) {
  :root { --barh: 78px; --headh: 60px; }

  .foot__in, .foot__in--2 { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* Jedna kolona: nema šta da se poravnava, pa blok stoji odmah ispod teksta. */
  .foot__soc { margin-top: 0; padding-top: 24px; }


  body { font-size: 14.5px; }
  /* Samo razmak — veličinu nosi `clamp()` u osnovnom pravilu. Ovde je do
     2026-08-03 stajalo i `font-size: 12px`, iz vremena kad je naslov bio
     sitan razvučen sans; posle prelaska na Playfair to je ostalo i naslov
     sekcije je na telefonu bio 12 px umesto 21. */
  .sec-title { padding: 26px var(--gut) 16px; }

  /* JEDNA slika po ekranu, sa 14% sledeće koja viri — tako se odmah vidi da
     ima još i prst zna kuda. Dve slike po ekranu (ranije) su na 375 px davale
     kadar od 153 px: presitno da se išta vidi, a prevlačenje je pomeralo dve
     odjednom pa se gubio red. */
  /* Red uverenja ispod dugmadi: ikona levo, svaka tvrdnja u svom redu.
     U jednom redu sa razdvojnom tačkom se na telefonu prelamao gde stigne, pa
     je „•" ostajala da visi na kraju reda — izgledalo je kao greška u tekstu. */
  .hero__reassure { display: grid; grid-template-columns: auto 1fr; gap: 5px 9px; align-items: start; }
  .hero__reassure-ico { grid-row: 1; margin-top: 2px; }
  .hero__reassure span { grid-column: 2; }
  .hero__reassure .dot { display: none; }

  .gal__cell { flex-basis: 86%; scroll-snap-align: center; }
  .rel__cell { flex-basis: 78%; scroll-snap-align: center; }
  /* Na telefonu se traka prevlači prstom, a strelice preko kartica smetaju.
     Listanje strelicama postoji tamo gde se slika i gleda — u punom ekranu
     (`.lb__nav`), gde ima mesta sa strane. */
  .rail-nav { display: none; }

  /* Uži tekst u trust traci da naslovi ostanu u jednom redu na telefonu. */
  .trust__ico { width: 22px; height: 22px; }
  .trust__item { gap: 10px; }
  .trust__item strong { font-size: 10.5px; letter-spacing: .06em; }
  .trust__item span { font-size: 11.5px; }

  /* Na telefonu je „−45%" osetno uže od reda „RASPRODAJA", pa je uz levo
     poravnanje ostajala praznina desno od procenta i pločica je izgledala
     nakrivo. Centriranje izjednačava oba reda. Desktop ostaje levo poravnat,
     kako je na maketi. */
  .hero__ribbon {
    /* Bočni padding je namerno veći od gornjeg/donjeg: kutija je široka tačno
       koliko najduža reč (`min-content`), pa je uz uzak padding tekst dodirivao
       ivice i pločica je delovala nepocentrirano — iako je matematički bila.
       Slova ostaju iste veličine, dobijaju samo vazduh. */
    padding: calc(13px * var(--ribbon)) calc(22px * var(--ribbon)) calc(14px * var(--ribbon));
    align-items: center; text-align: center;
    gap: calc(5px * var(--ribbon));
  }
  .hero__ribbon-pct { font-size: calc(24px * var(--ribbon)); }

  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; flex: none; }

  .feats { grid-template-columns: 1fr; }

  /* Kompaktna fiksirana traka: DVA DUGMETA, bez cene.

     Na telefonu je traka jedina stvar koja stalno stoji na ekranu, pa u njoj
     treba da budu RADNJE, ne podatak: upit i poziv. Cena se ne gubi — stoji u
     hero-u i u tabeli iznad, a i ponavljala se tik uz traku dok se skroluje
     vrh strane. Traka se ionako pojavljuje tek kad hero dugmad odu iz kadra.

     (Do sada je bilo obrnuto: cena plus jedno dugme, a poziv sakriven.) */
  .bar__in {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px var(--gut);
    gap: 12px;
  }
  .price--bar { display: none; }
  /* `flex-direction: row` mora izričito: pravilo iznad okreće SVE `.cta-row`
     u kolonu na telefonu (u hero-u je to i dalje ispravno), pa su dva
     dugmeta u traci stajala jedno ispod drugog i traka je bila duplo viša. */
  .bar .cta-row { min-width: 0; flex-direction: row; flex-wrap: nowrap; gap: 9px; }
  /* Dva jednaka dugmeta (`flex: 1 1 0`), ne „poziv koliko mu treba pa upit
     ostatak": natpis poziva je fiksan i kratak, a natpis upita ide od
     „POŠALJITE UPIT" do „REZERVIŠITE PRE ISTEKA ZALIHA" (A/B varijante). Sa
     dugmetom poziva na prirodnoj širini, na 320 px je upitu ostajalo 85 px i
     prelamao se u TRI reda — glavno dugme najuže na ekranu. */
  .bar .cta-row .btn { width: auto; min-width: 0; flex: 1 1 0; }
  /* Dug natpis se prelama u dva reda umesto da širi dugme. Važi za SVA
     glavna dugmad na telefonu, ne samo u traci: u hero sekciji je dugačka
     varijanta izlazila 14 px van panela, a `.hero { overflow: hidden }` je to
     ćutke sekao — tekst se gubio bez ijednog traga u merenju širine strane.

     A/B varijante idu od „POŠALJITE UPIT" do „REZERVIŠITE PRE ISTEKA ZALIHA",
     dakle dvostruka razlika, pa fiksna visina reda ne dolazi u obzir. */
  .cta-row .btn span {
    white-space: normal;
    line-height: 1.15;
    text-wrap: balance;
  }
  .bar__lead { display: none; }
  .bar .cta-row .btn { min-height: 46px; padding: 0 14px; font-size: 12px; letter-spacing: .06em; }
  /* Poziv: kratak natpis uz slušalicu, da upitu ostane što više mesta. */
  .bar .cta-row .btn--ghost { padding: 0 13px; }

  /* ------- traka izlazi tek kad dugmad iz hero-a odu (SAMO na telefonu) ----
     Na malom ekranu hero dugmad i traka stoje jedno ispod drugog, pa ista
     radnja piše dvaput. Zato se traka skriva dok su hero dugmad u kadru i
     klizne odozdo čim odu.

     Na širokom ekranu ovog pravila NEMA — tamo je traka uvek vidljiva, kao
     što je i traženo pri izradi; hero dugmad i traka su dovoljno razmaknuti
     da se ponavljanje ne primeti.

     Klasu `is-auto` dodaje `js/stickybar.js` i stoji na svim širinama, ali
     dejstvo ima samo ovde — granica je u CSS-u, na jednom mestu, pa nema
     drugog praga u JS-u koji bi mogao da se raziđe. Bez JS-a klase nema i
     traka ostaje vidljiva. */
  .bar.is-auto {
    transform: translateY(110%);
    transition: transform .34s var(--ease);
    will-change: transform;
  }
  .bar.is-auto.is-on { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .gal__rail, .rel__rail { scroll-behavior: auto; }
}

/* ========================= ČESTA PITANJA ==========================
   `<details>` nosi otvaranje sam; CSS samo skida podrazumevanu strelicu i
   okreće plus u iks. Spisak se skraćuje klasom `is-clamped` koju dodaje JS —
   bez JS-a su sva pitanja tu, samo bez dugmeta.
   ================================================================== */

.faq { max-width: 860px; margin: 0 auto; padding: 0 var(--gut) clamp(34px, 4vw, 56px); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 14px 20px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: clamp(16px, 1.5vw, 19px); font-weight: 600;
  line-height: 1.35; color: var(--ink);
  transition: color .2s var(--ease), padding-left .28s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }   /* Safari crta svoj trougao */

/* Zlatna crtica levo od pitanja: raste iz nule na hover i ostaje dok je
   pitanje otvoreno. Jedini ukras u sekciji — zato sme da bude ovoliko tih. */
.faq__q::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px;
  background: var(--gold); transform: translateY(-50%);
  transition: width .28s var(--ease);
}
/* Hover SAMO tamo gde pokazivač stvarno postoji. Na dodir `:hover` ostaje
   „zalepljen" posle tapa, pa je zlatna crtica ostajala kraj zatvorenog
   pitanja i posle zatvaranja — izgleda kao da je pitanje i dalje otvoreno. */
@media (hover: hover) and (pointer: fine) {
  .faq__item:hover .faq__q { padding-left: 22px; }
  .faq__item:hover .faq__q::before { width: 12px; }
}
.faq__item[open] .faq__q { padding-left: 22px; }
.faq__item[open] .faq__q::before { width: 12px; }
.faq__item[open] .faq__q { color: var(--red); }

.faq__ico {
  width: 18px; height: 18px; flex: none; color: var(--gold);
  transition: transform .32s cubic-bezier(.34, 1.4, .5, 1);
}
.faq__item[open] .faq__ico { transform: rotate(135deg); }
.faq__a {
  font-size: 14.5px; line-height: 1.72; color: var(--ink-soft);
  padding: 0 34px 22px 0;
}
/* Odgovor se ne pojavi naglo nego stigne pola koraka kasnije od otvaranja
   kutije — bez toga tekst „iskoči" pre nego što se visina slegne. */
.faq__item[open] .faq__a { animation: faqIn .34s var(--ease) both; }
@keyframes faqIn {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: none; }
}
/* Dok JS animira visinu, sadržaj se ne sme videti van okvira. */
.faq__item.is-anim { overflow: hidden; }
.faq__item.is-anim .faq__a { animation: none; }

/* --------- skraćen spisak ---------
   Preliv nosi CEO spisak, a ne poslednje pitanje: pitanja su različite visine,
   pa bi preliv vezan za stavku čas prekrio ceo odgovor, čas jedva zagrebao
   naslov. Ovako je uvek iste visine i uvek se završava tačno iznad dugmeta. */
.faq.is-clamped { position: relative; }
.faq.is-clamped .faq__item.is-hidden { display: none; }
/* Visinu preliva postavlja `js/faq.js` po STVARNOJ visini poslednjeg vidljivog
   pitanja (`--faq-fade`). Fiksna vrednost je gutala i dva pitanja iznad, pa su
   se ona koja su tu da se čitaju jedva videla. Rezerva od 150 px važi samo dok
   skripta ne izmeri. */
.faq.is-clamped::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 74px;
  height: var(--faq-fade, 150px);
  background: linear-gradient(to bottom, rgba(250, 247, 242, 0) 0%, rgba(250, 247, 242, .55) 38%, var(--cream) 100%);
  pointer-events: none;
}

/* Dugme je namerno BEZ okvira: strana već ima dva puna dugmeta (rezerviši,
   pozovi) i traku na dnu. Treći okvir bi se takmičio sa njima za pogled, a
   ovo je pomoćna radnja — tekst plus krug sa strelicom. */
.faq__more {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 11px;
  margin: 18px auto 0; padding: 10px 6px;
  background: none; border: 0; cursor: pointer;
}
.faq__more-txt {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em;
  color: var(--ink); transition: color .2s var(--ease);
}
.faq__more-ico {
  width: 27px; height: 27px; flex: none; border-radius: 50%;
  border: 1px solid var(--gold-soft); color: var(--gold);
  display: grid; place-items: center;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.faq__more-ico svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.faq__more[aria-expanded="true"] .faq__more-ico svg { transform: rotate(180deg); }
.faq__more:hover .faq__more-txt { color: var(--red); }
.faq__more:hover .faq__more-ico { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ========================= UTISCI KUPACA ========================== */

.rev { background: var(--cream-2); }
.rev__in {
  max-width: 1180px; margin: 0 auto;
  /* Donji razmak je veći nego kod ostalih sekcija: ispod utisaka odmah počinje
     tamni futer, pa svetle kartice bez vazduha deluju kao da su nalepljene na
     njega. */
  padding: 0 var(--gut) clamp(56px, 6vw, 84px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.rev__card {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 26px 24px 20px; display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* Navodnik u Playfairu, jedva vidljiv — isti potez kao inicijal u krugu.
   `aria-hidden` mu ne treba jer je crtan iz CSS-a, pa ga čitač ekrana i ne vidi. */
.rev__card::before {
  content: "\201C";
  position: absolute; top: -18px; right: 14px;
  font-family: var(--display); font-size: 96px; line-height: 1;
  color: var(--gold); opacity: .13; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.rev__card:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 16px 38px rgba(27, 21, 18, .10);
  border-color: var(--gold-soft);
}
.rev__card:hover::before { opacity: .2; transform: translate3d(0, 2px, 0); }

.rev__stars { display: flex; gap: 3px; margin-bottom: 12px; }
.rev__stars svg { width: 15px; height: 15px; color: var(--gold); }
.rev__stars svg.is-off { opacity: .28; }

/* Zvezdice ulaze jedna po jedna kad kartica uđe u kadar. Sitnica koju
   posetilac ne registruje svesno, ali je razlika između „ima ocenu" i
   „neko je ovo stvarno napisao". */
.js-reveal .rev .rev__stars svg { opacity: 0; transform: scale(.6); }
.js-reveal .rev.is-in .rev__stars svg {
  opacity: 1; transform: none;
  transition: opacity .28s var(--ease), transform .34s cubic-bezier(.34, 1.4, .5, 1);
}
.js-reveal .rev.is-in .rev__stars svg.is-off { opacity: .28; }
.js-reveal .rev.is-in .rev__stars svg:nth-child(1) { transition-delay: .10s; }
.js-reveal .rev.is-in .rev__stars svg:nth-child(2) { transition-delay: .16s; }
.js-reveal .rev.is-in .rev__stars svg:nth-child(3) { transition-delay: .22s; }
.js-reveal .rev.is-in .rev__stars svg:nth-child(4) { transition-delay: .28s; }
.js-reveal .rev.is-in .rev__stars svg:nth-child(5) { transition-delay: .34s; }
.rev__txt { font-size: 14.5px; line-height: 1.7; color: var(--ink); margin-bottom: 16px; flex: 1; }
.rev__who { display: flex; align-items: center; gap: 11px; }
.rev__ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--cream-3);
  font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--gold);
}
.rev__name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rev__meta { display: block; font-size: 12px; color: var(--ink-mute); margin-top: 2px; }

/* Na telefonu utisci idu u traku koja se prevlači, kao galerija i predloženi
   artikli — tri kartice jedna ispod druge zauzmu pola ekrana skrola, a i ne
   vidi se da ih ima još. Isti idiom kao ostatak strane. */
@media (max-width: 860px) {
  .rev__in {
    display: flex; gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-padding-left: var(--gut);
    /* Isti razlog kao na desktopu: ispod traka odmah počinje tamni futer. */
    padding-bottom: 48px;
  }
  .rev__in::-webkit-scrollbar { display: none; }
  .rev__card { flex: 0 0 84%; scroll-snap-align: start; }
  /* Traka se ne pomera pri hoveru — na dodir „hover" ostaje zaglavljen. */
  .rev__card:hover { transform: none; box-shadow: none; border-color: var(--line); }
}

/* ===================== PRISTANAK NA KOLAČIĆE ======================
   Kartica u DONJEM DESNOM uglu, iznad fiksirane trake (`z-index` 60), da se
   dve fiksirane stvari ne preklope.

   NE zatamnjuje stranu i ne zaključava skrol: zakon traži da se do pristanka
   ne piše nijedan kolačić, a ne da se sadržaj sakrije. Blokada preko cele
   strane obara i konverziju i ocenu strane, a pristanak ne čini valjanijim.

   Dva dugmeta su RAVNOPRAVNA — ista veličina, isti kontrast. Odbijanje koje
   je vizuelno slabije od prihvatanja je „mračni obrazac" i tako dobijen
   pristanak se ne računa kao valjan.
   ================================================================== */

.cc {
  position: fixed; z-index: 70;
  right: var(--gut); bottom: var(--gut);
  width: min(440px, calc(100vw - 2 * var(--gut)));
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cc.is-in { opacity: 1; transform: none; }
.cc[hidden] { display: none; }
/* Iznad fiksirane trake, ne preko nje — traka nosi glavnu radnju strane. */
body.has-bar .cc { bottom: calc(var(--barh) + var(--gut)); }

.cc__box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 18px 44px rgba(27, 21, 18, .22);
  padding: 24px 24px 20px;
}
.cc__t {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.25;
  margin-bottom: 10px;
}
.cc__ico { width: 22px; height: 22px; flex: none; color: var(--gold); }
.cc__b { font-size: 14px; line-height: 1.62; color: var(--ink-soft); margin-bottom: 20px; }
.cc__link { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

.cc__acts { display: flex; gap: 10px; }
.cc__acts .btn { flex: 1 1 0; min-width: 0; min-height: 48px; font-size: 12px; padding: 0 12px; }
/* Nevidljiv okvir na crvenom dugmetu: `flex-basis: 0` meri od sadržaja, pa je
   „ghost" dugme sa okvirom ispadalo 2 px šire. Ravnopravna dugmad su ovde
   pravno pitanje, ne estetsko — moraju biti izmereno ista. */
.cc__acts .btn--red { border: 1px solid transparent; }

/* --------------------------- granularni izbor ---------------------------
   „Podešavanja" su namerno TIŠA od dva glavna dugmeta: prihvati-sve i
   odbij-sve moraju biti podjednako laki, a izbor po svrsi sme da bude korak
   dalje. Obrnuto — sakriti odbijanje iza podešavanja — je mračni obrazac. */
.cc__more {
  display: block; margin: 12px auto 0;
  font-size: 12px; letter-spacing: .04em; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; cursor: pointer;
}
.cc__more:hover { color: var(--ink); }

.cc__prefs { margin-bottom: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.cc__prefs[hidden] { display: none; }

.cc__pref { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.cc__pref input { margin-top: 2px; width: 17px; height: 17px; flex: none; accent-color: var(--red); cursor: pointer; }
.cc__pref b  { display: block; font-size: 13px; font-weight: 600; }
.cc__pref em { display: block; font-size: 12px; line-height: 1.5; color: var(--ink-soft); font-style: normal; margin-top: 2px; }
/* Neophodni kolačići se ne biraju — prikazani su da se vidi šta se NE pita. */
.cc__pref--fixed { cursor: default; opacity: .72; }
.cc__pref--fixed input { cursor: not-allowed; }
.cc__save { width: 100%; min-height: 44px; margin-top: 10px; font-size: 12px; }

/* Link u futeru kojim se pristanak menja ili povlači. Izgleda kao ostali
   linkovi u futeru, jer to i jeste — nije dugme za radnju na strani. */
.cc-open {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; opacity: .85;
  text-decoration: underline; text-underline-offset: 3px;
}
.cc-open:hover { opacity: 1; }
.cc-open[hidden] { display: none; }
.foot__legal { text-decoration: underline; text-underline-offset: 3px; opacity: .85; }
.foot__legal:hover { opacity: 1; }

@media (max-width: 720px) {
  /* Iznad trake na dnu, da je ne pokrije — traka nosi glavnu radnju. */
  /* Niže, uz samu traku — na telefonu je svaki piksel iznad nje sadržaj. */
  .cc { left: 10px; right: 10px; bottom: calc(var(--barh) + 6px); width: auto; }
  body:not(.has-bar) .cc { bottom: 6px; }
  /* `dvh`, ne `vh`: na telefonu `100vh` računa i traku pregledača sa adresom,
     pa je kartica ispadala viša od vidljivog dela ekrana i VRH joj je bio
     odsečen — baš naslov i pitanje. Oduzima se i visina zaglavlja, da kartica
     ne ulazi pod njega. Fallback red iznad je za pregledače bez `dvh`. */
  .cc__box {
    padding: 20px 18px 16px; overflow-y: auto;
    max-height: calc(100vh - var(--barh) - var(--headh) - 16px);
    max-height: calc(100dvh - var(--barh) - var(--headh) - 16px);
    overscroll-behavior: contain;
  }
  .cc__t { font-size: 18px; }
  .cc__acts { flex-direction: column; }
}

/* ==================== POLITIKA PRIVATNOSTI ========================
   Jedina strana na sajtu koja je čist tekst. Merilo je čitljivost, ne
   prodaja: uska kolona (68 znakova), veći prored, bez ijedne animacije.
   ================================================================== */

.legal {
  max-width: 760px; margin: 0 auto;
  padding: 44px var(--gut) 72px;
  font-size: 15px; line-height: 1.75; color: var(--ink-soft);
}
/* Dugme „Nazad" iznad naslova. Nije `.btn` — puno dugme na vrhu pravnog teksta
   vuče pažnju jače od samog naslova; ovo je link sa strelicom koji se vidi tek
   kad se traži. */
.legal__h1 {
  font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: clamp(26px, 3.4vw, 36px); line-height: 1.2; margin-bottom: 6px;
}
.legal__meta { font-size: 13px; color: var(--ink-mute); margin-bottom: 30px; }
.legal h3 {
  font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: clamp(15px, 1.6vw, 17px); line-height: 1.35;
  margin: 20px 0 8px;
}
.legal h2 {
  font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: clamp(18px, 2vw, 21px); line-height: 1.3;
  margin: 34px 0 10px; padding-top: 22px; border-top: 1px solid var(--line);
}
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: var(--cream-2); border-radius: 3px; padding: 1px 5px; color: var(--ink);
}

.legal__tbl { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: 13.5px; }
.legal__tbl th {
  text-align: left; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding: 8px 10px 8px 0;
}
.legal__tbl td { border-bottom: 1px solid var(--line); padding: 9px 10px 9px 0; vertical-align: top; }
.legal__tbl code { background: none; padding: 0; }

/* Tabela sa kolačićima na telefonu: red po red, sa nazivom kolone ispred
   vrednosti — vodoravno skrolovanje na 375 px se ne čita. */
@media (max-width: 560px) {
  .legal { padding-top: 32px; font-size: 14.5px; }
  .legal__tbl thead { display: none; }
  .legal__tbl tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .legal__tbl td { display: flex; gap: 10px; border: 0; padding: 2px 0; }
  .legal__tbl td::before { content: attr(data-k); flex: 0 0 88px; color: var(--ink-mute); }
}

/* ======================= POSETITE NAŠ SALON =======================
   Fotografija salona + poziv da se dođe uživo, između istaknute poruke i
   dimenzija. Markup: `inc/salon.php`.

   Sve je u jednoj KREM KARTICI na beloj podlozi, po referenci koju je klijent
   poslao. Bez kartice bi se blok slio sa krem sekcijama iznad i ispod, jer je
   i sam krem.

   Tri kolone: fotografija — tekst — praktični podaci. Podaci su namerno
   izdvojeni od teksta: onaj ko traži adresu i radno vreme ne čita pasus, nego
   skenira desnu ivicu.
   ================================================================== */
.salon { background: var(--paper); padding: clamp(30px, 3.6vw, 52px) 0 clamp(26px, 3vw, 42px); }
.salon__card {
  max-width: var(--max); margin: 0 auto;
  background: var(--cream);
  border-radius: var(--r-card);
  padding: clamp(16px, 1.8vw, 24px);
}
.salon__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .72fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: center;
}
.salon__fig { border-radius: var(--r-img); overflow: hidden; background: var(--cream-2); }
.salon__fig img {
  display: block; width: 100%; height: 100%;
  /* Fotografija je široka 720 px, a kolona ume da bude i šira — `cover` uz
     zadati odnos je drži oštrom po ivicama umesto da je razvlači. */
  aspect-ratio: 7 / 6; object-fit: cover;
}

.salon__body { padding: clamp(6px, 1vw, 14px) 0; }
.salon__eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px;
}
.salon__title {
  font-family: var(--display);
  font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; line-height: 1.22;
  margin-bottom: 12px;
}
.salon__text { color: var(--ink-soft); font-size: 14.5px; line-height: 1.75; margin-bottom: 22px; }

/* Sitan red iznad dugmeta: četiri stavke u jednom redu, ikona iznad teksta. */
.salon__perks {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-bottom: 24px;
}
.salon__perks li {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; font-size: 11.5px; line-height: 1.4; color: var(--ink-soft);
}
.salon__perk-ico { width: 26px; height: 26px; color: var(--gold); stroke-width: 1.3; }

/* Dugme je PUNO zlatno, kao na referenci — u krem kartici bi providno dugme
   sa tankom ivicom nestalo. */
.salon__cta {
  background: var(--gold); color: #fff; border: 1px solid var(--gold);
}
@media (hover: hover) and (pointer: fine) {
  .salon__cta:hover { background: var(--espresso, var(--ink)); border-color: var(--ink); transform: translateY(-2px); }
}

/* Kolona sa praktičnim podacima. */
.salon__info {
  display: flex; flex-direction: column; gap: 16px;
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(16px, 2vw, 28px);
}
.salon__info li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.5; }
.salon__ico { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 2px; }
.salon__k { display: block; font-style: normal; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px; }
.salon__info a { border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), color .2s var(--ease); }
.salon__info a:hover { color: var(--gold); border-bottom-color: currentColor; }

/* --- traka „zašto kupci dolaze" --- */
.salon__why {
  max-width: var(--max); margin: clamp(26px, 3vw, 44px) auto 0; padding: 0 var(--gut);
}
.salon__why-t {
  text-align: center;
  font-size: 12px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.salon__why ul {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 34px);
  border-top: 1px solid var(--line-soft); padding-top: clamp(26px, 3vw, 38px);
}
.salon__why li {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; font-size: 14.5px; line-height: 1.55; color: var(--ink);
  max-width: 22ch; margin: 0 auto;
}
/* Ikone su namerno KRUPNE (44 px) i tanke. Na 30 px su se gubile u praznini
   trake i čitale kao ukras uz tekst; ovde one nose red, a tekst ih objašnjava.
   Tanja linija (1.2 umesto 1.4) je ono što ih na toj veličini drži lakim. */
.salon__why-ico { width: 44px; height: 44px; color: var(--gold); stroke-width: 1.2; }

@media (max-width: 1080px) {
  /* Podaci ispod teksta, preko obe kolone — u trećoj koloni na ovoj širini
     adresa se lomi na četiri reda. */
  .salon__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .salon__info {
    grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 14px 30px;
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line-soft); padding-top: 18px;
  }
}
@media (max-width: 780px) {
  /* Slika IZNAD teksta: u dve uske kolone se i fotografija i tekst svedu na
     nečitljivo. */
  .salon__grid { grid-template-columns: minmax(0, 1fr); }
  .salon__perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .salon__why ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .salon__cta { width: 100%; }
}
@media (max-width: 460px) {
  .salon__text { font-size: 14px; }
  .salon__why li { font-size: 13px; }
  .salon__why-ico { width: 36px; height: 36px; }
}

/* ====================== DUGME ZA BRZI KONTAKT ======================
   Krug u donjem desnom uglu; klik otvara stub kanala NAVIŠE. Markup je u
   `inc/chat.php`, ponašanje u `js/chat.js`.

   Tri fiksirane stvari dele isti ugao, pa je red namerno ovakav:
   `z-index` 60 traka (glavna radnja) < 65 ovo dugme < 70 kartica o
   kolačićima. Dok kartica stoji, dugme se SKLANJA (`body.cc-on`) — jedno
   preko drugog u istom uglu izgleda kao greška, a do odluke o kolačićima ne
   treba ništa drugo da odvlači pažnju.

   Oznake su BELE pločice sa sitnim razmaknutim verzalom, kao i ostale sitne
   oznake na strani (traka uslova, kartice). Crne pločice iz uobičajenih
   „chat" dodataka su na krem podlozi izgledale kao tuđi umetak.
   ================================================================== */
.chat {
  position: fixed; z-index: 65;
  /* Bliže ivici nego ostali sadržaj (`--gut` je 26 px): dugme nije deo
     rasporeda strane nego stoji NAD njim, pa poštovanje iste margine ga vuče
     ka sredini i izgleda kao da je nešto zaboravljeno u tekstu.
     `--korak` je razmak izmedju dva reda stuba, a `--dno` ono što poslednji red
     ima VIŠE do okidača (okidač je veći od kruga i stoji na svom razmaku). Iz
     ta dva se računa odakle svaka stavka kreće pri otvaranju; bez `--dno` ceo
     stub kreće 9 px iznad dugmeta, pa se vidi da ne izlazi baš iz njega. */
  /* Krug kanala je ISTE veličine kao okidač, pa im se sredine poklapaju i ceo
     stub stoji na jednoj osi sa dugmetom. Dok su bili uži (46 prema 58), imali
     su isti desni rub ali sredinu pomerenu za 6 px i niz je delovao krivo. */
  --krug: 56px;
  --korak: 68px;   /* krug + razmak između redova */
  --dno: 2px;      /* koliko poslednji red ima VIŠE do okidača */
  --centar: 0px;
  right: 16px; bottom: var(--gut);
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
/* Razmak do fiksirane trake je veći od margine ka ivici: traka je puna i
   tamna, pa se dugme uz nju čita kao njen deo. */
body.has-bar .chat { bottom: calc(var(--barh) + 34px); }
/* Kartica o kolačićima je u istom uglu i ima prednost. */
body.cc-on .chat { opacity: 0; visibility: hidden; transform: translateY(8px); }

.chat__btn {
  position: relative;
  width: var(--krug); height: var(--krug); border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-2), var(--gold));
  color: #fff; border: 0;
  display: grid; place-items: center;
  box-shadow: 0 14px 30px rgba(27, 21, 18, .26), 0 0 0 1px rgba(255, 255, 255, .38) inset;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* Talas koji se raširi tri puta pa stane. Stalna animacija u uglu ekrana
   posle pola minuta smeta; tri otkucaja su dovoljna da se dugme primeti. */
.chat__btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--gold);
  animation: chat-talas 2.6s var(--ease) 3;
  pointer-events: none;
}
@keyframes chat-talas {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(1.5); }
}
.chat.is-open .chat__btn::after { animation: none; opacity: 0; }
.chat.is-open .chat__btn { box-shadow: 0 8px 20px rgba(27, 21, 18, .22); }

.chat__ico {
  grid-area: 1 / 1; width: 26px; height: 26px;
  transition: opacity .2s var(--ease), transform .25s var(--ease);
}
.chat__ico--x { opacity: 0; transform: rotate(-90deg) scale(.7); }
.chat.is-open .chat__ico { opacity: 0; transform: rotate(90deg) scale(.7); }
.chat.is-open .chat__ico--x { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .chat__btn:hover { transform: translateY(-2px) scale(1.04); }
}

/* `stretch` umesto `flex-end`: sve stavke dobijaju širinu NAJŠIRE, pa se leve
   ivice pločica poravnaju u kolonu. Sa `flex-end` je svaka bila široka koliko
   svoj tekst, pa je niz sa leve strane bio testerast — a to je jedina strana
   sa koje se i gleda. Radi i kad se broj telefona promeni: kolonu i dalje
   određuje najduži tekst, ma koji bio. */
.chat__list { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.chat__list[hidden] { display: none; }

.chat__it {
  /* Bez razmaka: oznaka i krug su JEDAN oblik — pločica ulazi ispod kruga, a
     krug stoji preko nje. Sa razmakom su izgledali kao dve odvojene stvari
     koje slučajno stoje jedna do druge. */
  display: flex; align-items: center; justify-content: flex-end; gap: 0;
  /* Zatvoreno stanje: svaka stavka STOJI NA OKIDAČU, smanjena i providna.
     Razdaljina se računa iz njenog mesta u nizu (`--i`) i ukupnog broja
     (`--n`), pa gornja stavka putuje najduže — otvaranje izgleda kao da se
     stub izlio iz dugmeta, a ne kao da su četiri kruga uskočila odjednom. */
  opacity: 0;
  transform: translate(var(--centar), calc((var(--n, 4) - var(--i, 0)) * var(--korak) + var(--dno))) scale(.4);
  transform-origin: calc(100% - var(--krug) / 2) 50%;   /* sredina kruga, ne cele stavke */
  /* Dve odgode, ne jedna: `--d` pomera stavku, `--do` je fade. Pri GAŠENJU
     fade kasni za pokretom, da se vidi kako se stavka povlači u dugme — sa
     istovremenim fade-om nestane za 0,2 s i deluje kao da se ugasila bez
     animacije, što je i bila primedba. */
  transition: opacity .24s var(--ease) var(--do, 0s), transform .4s var(--ease) var(--d, 0s);
}
.chat.is-open .chat__it { opacity: 1; transform: none; }
/* OTVARANJE — odozdo naviše: prva krene ona najbliža okidaču. */
.chat.is-open .chat__it:nth-last-child(1) { --d: .02s; --do: .02s; }
.chat.is-open .chat__it:nth-last-child(2) { --d: .07s; --do: .07s; }
.chat.is-open .chat__it:nth-last-child(3) { --d: .12s; --do: .12s; }
.chat.is-open .chat__it:nth-last-child(4) { --d: .17s; --do: .17s; }
/* GAŠENJE — obrnuto, odozgo naniže: najdalja prva ulazi nazad, pa niz izgleda
   kao da se uvlači u dugme umesto da nestane u mestu. */
.chat:not(.is-open) .chat__it:nth-child(1) { --d: 0s;   --do: .10s; }
.chat:not(.is-open) .chat__it:nth-child(2) { --d: .05s; --do: .15s; }
.chat:not(.is-open) .chat__it:nth-child(3) { --d: .10s; --do: .20s; }
.chat:not(.is-open) .chat__it:nth-child(4) { --d: .15s; --do: .25s; }

/* Oznaka pored kruga — bez nje se na 46 px ne zna da li telefon zove ili
   otvara formu. */
.chat__lab {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  flex: 1 1 auto;
  /* Visina je visina kruga, a desni kraj ulazi POD krug (negativna margina
     jednaka polovini kruga, uz isto toliko unutrašnjeg razmaka) — pa pločica i
     krug čine jednu kapsulu. */
  min-height: var(--krug);
  display: flex; align-items: center; justify-content: center;
  margin-right: calc(var(--krug) / -2);
  padding: 0 calc(var(--krug) / 2 + 14px) 0 18px;
  font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  /* Zaobljeno SAMO levo. Desni kraj je ravan i seče se tačno na sredini kruga
     — tu je krug najširi, pa se ivice poklope i pločica pređe u krug bez šava.
     Sa zaobljenim desnim krajem se ispod kruga videla još jedna oblina i dva
     oblika su izgledala kao dva, a ne kao jedan. */
  border-radius: 999px 0 0 999px; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(27, 21, 18, .12);
  /* Oznaka stiže TEK kad krug slegne (odgoda stavke + 0,16 s). Da krenu
     zajedno, čitao bi se tekst koji još putuje — a ime kanala ima smisla tek
     kad se zna gde je krug stao. */
  opacity: 0; transform: translateX(12px);
  transition: opacity .22s var(--ease), transform .28s var(--ease);
}
/* Odgoda stoji SAMO u otvorenom stanju — pri zatvaranju oznaka nestaje odmah,
   a krug se povlači za njom. Obrnuto bi značilo da tekst visi u vazduhu 0,16 s
   pošto je krug već otišao. */
.chat.is-open .chat__lab {
  opacity: 1; transform: none;
  transition-delay: calc(var(--d, 0s) + .16s);
}
.chat__b {
  /* Iznad pločice, inače bi je krug delimično pokrio umesto obrnuto. */
  position: relative; z-index: 1;
  width: var(--krug); height: var(--krug); border-radius: 50%;
  display: grid; place-items: center; flex: none;
  color: #fff; background: var(--ink);
  /* Tanka bela ivica odvaja krug i od krem podloge i od tamnog futera —
     stub prelazi preko oba dok se strana skroluje. */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 8px 20px rgba(27, 21, 18, .2);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.chat__i { width: 24px; height: 24px; }
.chat__i--line { width: 21px; height: 21px; }
/* Boje kanala su njihove, ne naše: po zelenom i ljubičastom krugu se WhatsApp
   i Viber prepoznaju pre nego što se pročita oznaka. Telefon i e-mail ostaju
   u boji strane — dva „naša" kanala ne treba da se takmiče sa dva tuđa. */
.chat__it--whatsapp .chat__b { background: linear-gradient(150deg, #3ae07b, #1fb955); }
.chat__it--viber .chat__b { background: linear-gradient(150deg, #8b7bff, #6a55e8); }
/* Telefon NIJE zlatan iako je najvažniji kanal: zlatan je samo okidač, i to
   je jedina stvar po kojoj se on razlikuje od stavki u stubu. Kad su oba
   zlatna, okidač se čita kao peti kanal. */
@media (hover: hover) and (pointer: fine) {
  .chat__it:hover .chat__b { transform: scale(1.08); }
  .chat.is-open .chat__it:hover .chat__lab { transform: translateX(-3px); border-color: var(--gold-soft); }
}

@media (max-width: 560px) {
  /* Manji krugovi i manji razmak — `--korak` mora da prati, inače stavke
     kreću ispod okidača umesto iz njega. */
  .chat { --krug: 50px; --korak: 61px; --dno: 3px; --centar: 0px; right: 12px; gap: 14px; }
  body.has-bar .chat { bottom: calc(var(--barh) + 22px); }
  .chat__i { width: 22px; height: 22px; }
  .chat__lab { font-size: 10.5px; padding-left: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__it, .chat__ico, .chat__btn, .chat__lab { transition: none; }
  .chat__btn::after { animation: none; opacity: 0; }
  /* Bez prelaza stavka ne sme da ostane pomerena na mesto okidača. */
  .chat__it { transform: none; }
}

/* ===================== PRELAZ IZMEĐU STRANA =====================
   Kad posetilac sa kategorije ode na artikal ili na politiku privatnosti,
   pregledač preliva staru stranu u novu umesto da trepne u belo — utisak je
   da je sve jedna strana.

   Radi bez ijedne linije JavaScripta i bez presretanja klikova: pregledači
   koji ovo ne podržavaju (Firefox u ovom trenutku) rade kao i do sada, obično
   učitavanje. Zato i nema šta da se pokvari.
   ================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .26s;
  animation-timing-function: var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ============================ PRINT ============================ */
@media print {
  .head, .bar, .rail-nav, .modal, .lb, .skip, .chat { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
}