/* ═══════════════════════════════════════════════════════════════════
   NEVEMIL GARNITURE — stil
   Brend: crno + mesing, kruna, „Luksuz dostupan svima"
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   Prelazak sa strane na stranu bez treptaja.

   Sajt ima 31 zasebnu stranu, pa svaki klik u meniju znaci pravo ucitavanje.
   Firefox tada zadrzi sliku stare strane dok nova ne bude spremna, pa se
   prelazak ne vidi. Edge to ne radi uvek: na tren pokaze praznu stranu sa
   breadcrumbom, pa izgleda kao da se sajt osvezava. Ivan je to prijavio
   22.09.2026 („umesto da stranica ostane fiksna i samo se promeni sadrzaj,
   ovde na sekund nestane").

   `@view-transition` resava upravo to: browser zadrzi zatecenu sliku i pređe
   na novu kad je nova iscrtana. Radi samo kad obe strane pripadaju istom
   sajtu. Firefox ga jos nema — tamo se nista ne menja, a tamo problema i nema.

   Prelaz je namerno kratak i bez pomeranja: cilj je da nestane treptaj, ne da
   se uvede animacija. Kome su pokreti smanjeni, prelaza nema uopste.
   ─────────────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

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

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

:root {
  /* noć — topla, ne neutralna crna */
  --noc:            #16120D;
  --noc-2:          #211A13;
  --noc-3:          #2D241A;

  /* papir */
  --krem:           #FAF6EF;
  --krem-2:         #F1E9DC;
  --krem-3:         #E4D8C5;

  /* mesing */
  --mesing:         #C9A227;
  --mesing-svetli:  #E5C978;
  --mesing-tamni:   #7D6218;

  /* tekst */
  --na-tamnom:      #F4ECDE;
  --na-tamnom-tih:  #B3A48C;
  --na-svetlom:     #2A231B;
  --na-svetlom-tih: #6B5F4E;

  --linija-tamna:   rgba(244, 236, 222, .14);
  --linija-svetla:  rgba(42, 35, 27, .13);
  --senka:          rgba(22, 18, 13, .16);

  /* Pismo po logou: ukrašen inicijal, visok kontrast, klinasti serifi.
     Playfair Display je najbliže tome od široko dostupnih; Lora drži isti
     duh u tekstu. Obe imaju č, ć, š, ž, đ (latin-ext). */
  --pismo-naslov: "Playfair Display", Georgia, "Times New Roman", serif;
  --pismo-tekst:  Lora, Georgia, "Times New Roman", serif;

  --mera: 36rem;

  --t-xs:  .75rem;
  --t-sm:  .875rem;
  --t-md:  1.0625rem;
  --t-lg:  1.25rem;
  --t-xl:  1.625rem;
  --t-2xl: 2.25rem;
  --t-3xl: 3rem;

  --razmak: clamp(1.5rem, 5vw, 3rem);

  /* Vertikalni ritam — jedan izvor za ceo sajt (23.09.2026). Ivan: razmak
     između poglavlja je prevelik, treba kompaktno i na desktopu i na
     telefonu. Izmereno pre izmene: 176 px praznine između dva odeljka na
     desktopu (88 dole + 88 gore), 96 px na telefonu; pred futerom do 194 px.
     Posle: 96 / 56 px. Menja se OVDE, ne po pravilima. */
  --ritam-odeljak: clamp(28px, 4vw, 48px);   /* padding odeljka, gore i dole */
  --ritam-glava:   clamp(20px, 3vw, 32px);   /* naslov odeljka → sadržaj    */
  --ritam-celina:  clamp(28px, 4vw, 40px);   /* celina unutar odeljka       */
}

* { box-sizing: border-box; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--krem);
  color: var(--na-svetlom);
  font-family: var(--pismo-tekst);
  font-size: var(--t-md);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, .prikaz {
  font-family: var(--pismo-naslov);
  font-weight: 500;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -.005em;
}

p { margin: 0; }

a { color: inherit; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--mesing);
  outline-offset: 3px;
  border-radius: 2px;
}

.omot {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.mera { max-width: var(--mera); }

.nadnaslov {
  font-family: var(--pismo-tekst);
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mesing-tamni);
}
.na-tamnom .nadnaslov, .zaglavlje .nadnaslov, .stopa .nadnaslov { color: var(--mesing-svetli); }

/* ── zaglavlje ─────────────────────────────────────────────────── */

/* Zaglavlje je od 20.09.2026 TAMNO. Do tada je bilo krem, uz obrazloženje
   da su „slova logoa crna sa zlatnim obrubom, pa se na tamnoj podlozi ne bi
   videla". To je izmereno i ne stoji: slova SU zlatna, crn je štit iza njih.
   Brojevi (WCAG, na samom znaku):

       podloga            crni štit   zlato na slovima
       krem  #FAF6EF        19,5:1          1,3:1
       braon #3A2E1C         1,6:1          9,5:1
       skoro crno #16120D    1,1:1         13,4:1

   Na krem podlozi zlato je bilo praktično nevidljivo i znak se čitao kao
   crna mrlja. Na tamnoj se odnos obrne: štit utone, zlato izađe.

   Tamno zaglavlje nosi SAMO početna, gde se nastavlja na tamnu uvodnu
   fotografiju. Ostale strane ostaju krem: tamno iznad krem tela je na
   njima bilo pretvrdo (Ivan, 20.09.2026), a sredina ne postoji — na
   srednjem braonu (#6B573A, #8A7355) padaju i tamna i svetla slova
   menija, 1,1–2,8:1. Radi ili tamno ili svetlo, trećeg nema. */
/* JEDNO zaglavlje na svih 31 strani. Do 20.09.2026 je početna imala skoro
   crno, a ostale krem — i to je bila greška koju je Ivan osetio pre nego što
   se imenovala: zaglavlje je jedina stvar koja posetiocu govori da je i dalje
   na istom mestu, pa kad se pri kliku prebaci sa crnog na krem, ne čita se
   kao varijacija stila nego kao druga strana drugog sajta.

   Uz njega se menjao i ZNAK, što je gore. Mereno na samom logou:

       podloga            crni štit   zlato na slovima
       krem  #FAF6EF        19,5:1          1,3:1   ← vidi se crna mrlja
       braon #3A2E1C         1,6:1          9,5:1   ← vidi se zlatan grb
       skoro crno #16120D    1,1:1         13,4:1

   Dakle logo se pri svakom prelasku pretvarao iz zlatnog grba u crnu mrlju.

   Izabran je TOPLI braon-mesing, ne skoro crno: crna ploča iznad krem strane
   seče, a braon iznad krema je star i miran obrazac — tamna navigacija,
   svetao sadržaj. Slova menija na njemu imaju 5,4:1.

   `je-pocetna` ostaje na <body>, ali više ne menja boju — nosi je samo
   skripta, da zna gde sme da crta prašinu. Dodatak sme da bude samo na
   početnoj; identitet ne sme da se menja. */
.zaglavlje {
  background: linear-gradient(180deg, #3A2E1C 0%, #2A2116 55%, #211A13 100%);
  color: var(--na-tamnom);
  border-bottom: 1px solid rgba(201, 162, 39, .45);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}

/* Platno prašine se ubacuje kao prvi element zaglavlja i stoji ISPOD
   sadržaja. Pravila su ovde, a ne u skripti, i to zbog jedne konkretne
   greške: skripta je pisala `zaglavlje.style.position = "relative"` da bi
   platno imalo za šta da se zakači — a inline stil je jači od ovog fajla,
   pa je time GAZILA `position: sticky` iz pravila iznad. Početna zato nije
   imala lepljivo zaglavlje, i logo je pri učitavanju odskačio na mesto.
   `sticky` je ionako pozicioniran, pa apsolutno dete i bez toga računa
   položaj prema njemu. (Ivan primetio 20.09.2026: „kao da logo na delić
   sekunde promeni poziciju“.)

   Platno nema prelaz i vidljivo je odmah. Utapanje je postojalo dok je
   skripta išla sa `defer` i palila se tek posle iscrtavanja strane — tada
   je prvi kadar bio bez prašine. Od 21.09.2026. skripta stoji iza zaglavlja
   i izvršava se pre prvog piksela, pa nema šta da se utapa; svaki prelaz bi
   se video kao da je pokret počeo iznova. */
.zaglavlje > .omot { position: relative; z-index: 1; }
/* Platno prasine se pojavljuje stapanjem, ne upadanjem.

   Skripta zaglavlja ide sa `defer` (vidi `gradi.py`), pa se platno napravi tek
   posle iscrtavanja strane. Bez ovoga bi prasina naglo upala u vec nacrtano
   zaglavlje — bas ono zbog cega je `defer` 21.09.2026. bio odbacen. Animacija
   krece sama kad skripta ubaci canvas u DOM, jer ga do tada u dokumentu nema.  */
@keyframes platno-ulaz { from { opacity: 0 } to { opacity: 1 } }

.zaglavlje > canvas {
  animation: platno-ulaz .32s ease both;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.zaglavlje .omot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-block: 14px;
  flex-wrap: wrap;
}

.znak {
  display: block;
  line-height: 0;
  text-decoration: none;
  flex-shrink: 0;
}
/* Zlatni obrub oko slova je ono po cemu se logo prepoznaje. Ispod ~60px
   se izgubi i slova deluju ravno crna — zato je znak namerno krupan. */
.znak img {
  width: auto;
  height: clamp(58px, 10vw, 84px);
  object-fit: contain;
}

/* `align-items` je ovde OBAVEZAN, ne kozmetika. Bez njega red je `stretch`:
   sve <li> se rastegnu na visinu najvišeg, a to je „Kontakt" — on je dugme sa
   padding: 8px, dakle ~42 px, dok obična veza ima ~33 px. Običan tekst tada
   sedne na VRH svog rastegnutog reda, a „Kontakt" je u svom <li> centriran, pa
   ispadne oko 5 px niže od ostalih. (Ivan primetio 20.09.2026.)
   Na telefonu se vraća `stretch`: tamo je spisak kolona i stavke moraju da
   idu punom širinom, inače se skupe na sredinu i linije između njih se skrate. */
.meni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-sm);
}
.meni a {
  text-decoration: none;
  color: var(--na-tamnom-tih);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.meni a:hover { color: var(--na-tamnom); border-bottom-color: var(--mesing); }
.meni a[aria-current="page"] { color: var(--na-tamnom); border-bottom-color: var(--mesing); }

/* ── sklopivi meni na telefonu (bez JavaScripta) ─────────────────
   Osam stavki na 390px zauzima dva reda i gura sadržaj nadole.
   Prekidač je sakriveni checkbox, dugme je njegov <label>. */

.meni-prekidac { position: absolute; opacity: 0; width: 0; height: 0; }
.meni-dugme { display: none; }

@media (max-width: 52rem) {
  /* `nowrap` je ovde stajalo i lomilo otvoren meni: `nav` ima `flex-basis:100%`,
     što bez preloma ne znači ništa — spisak je ostajao u ISTOM redu sa znakom i
     dugmetom, stisnut u desnu polovinu, dok je leva polovina stajala prazna, a
     znak i dugme su plutali po sredini visine. Izmereno 19.09.2026 na 375×667:
     zaglavlje 604 px od 667 (91% ekrana) i stavka „Kontakt" je ispadala sa
     ekrana. Sa prelomom spisak ide u svoj red, pune širine, ispod znaka. */
  .zaglavlje .omot { flex-wrap: wrap; row-gap: 0; }

  .meni-dugme {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    padding: 9px 14px;
    border: 1px solid rgba(229, 201, 120, .3);
    border-radius: 2px;
    cursor: pointer;
    user-select: none;
  }
  .meni-rec {
    font-size: var(--t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--na-tamnom);
  }
  .meni-crte, .meni-crte::before, .meni-crte::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--na-tamnom);
    transition: transform .2s, opacity .2s;
  }
  .meni-crte { position: relative; }
  .meni-crte::before, .meni-crte::after { content: ""; position: absolute; left: 0; }
  .meni-crte::before { top: -6px; }
  .meni-crte::after { top: 6px; }

  .meni-prekidac:checked ~ .meni-dugme .meni-crte { background: transparent; }
  .meni-prekidac:checked ~ .meni-dugme .meni-crte::before { transform: translateY(6px) rotate(45deg); }
  .meni-prekidac:checked ~ .meni-dugme .meni-crte::after { transform: translateY(-6px) rotate(-45deg); }

  /* Otvoren meni ne sme da proguta ekran. Umesto `grid-template-rows` uzima se
     `max-height`, jer ista osobina nosi i prelaz i GRANICU: šta god da se doda u
     meni, spisak staje na visinu ekrana umanjenu za zaglavlje i za 56 px koji
     ostaju da se vidi strana ispod. Ako ni to ne bude dosta, spisak se skroluje
     umesto da se stavke odseku — ranije je „Kontakt" na 375×667 jednostavno
     ispadao sa ekrana, jer `overflow: hidden` nema gde da ga pokaže. */
  .zaglavlje nav {
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .meni-prekidac:checked ~ nav {
    max-height: calc(100dvh - var(--zaglavlje-red, 88px) - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .meni {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding-bottom: 8px;
  }
  .meni li { border-top: 1px solid var(--linija-tamna); }
  .meni li:first-child { border-top: 0; }
  /* 44 px je donja granica pouzdanog dodira (Apple HIG, WCAG 2.5.8 traži 24).
     Red je bio 55–56 px: deset stavki je tako davalo 517 px samo spiska. */
  .meni a {
    display: block;
    padding: 11px 2px;
    font-size: var(--t-sm);
    line-height: 1.45;
    border-bottom: 0;
    min-height: 44px;
  }
  .meni a[aria-current="page"] { color: var(--mesing-tamni); font-weight: 600; }

  /* Kontakt je jedina radnja — na telefonu ide punom širinom, da se ne traži. */
  .meni-cta-stavka { padding-block: 10px 2px; }
  .meni-cta { display: block; width: 100%; text-align: center; padding: 12px 22px; }

  .meni-prekidac:focus-visible ~ .meni-dugme {
    outline: 2px solid var(--mesing);
    outline-offset: 3px;
  }
}

/* Kontakt je jedina radnja u meniju — nosi je dugme, ne veza. */
.meni-cta-stavka { display: flex; align-items: center; }
/* Kontakt je mesing sa tamnim slovima (7,7:1). Crno dugme, kakvo je bilo na
   krem zaglavlju, na tamnom ne postoji — a mesing je usput i jedina puna
   boja u celom redu, pa jedina radnja u meniju i izgleda kao radnja. */
.meni-cta {
  padding: 8px 18px;
  border: 1px solid var(--mesing);
  border-radius: 2px;
  background: var(--mesing);
  color: var(--noc) !important;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .18s, border-color .18s;
}
.meni-cta:hover {
  background: var(--mesing-svetli);
  border-color: var(--mesing-svetli);
  color: var(--noc) !important;
}
.meni a.meni-cta:hover, .meni a.meni-cta[aria-current="page"] { border-bottom-color: transparent; }
.meni a.meni-cta[aria-current="page"] { background: var(--mesing-tamni); border-color: var(--mesing-tamni); }

.stopa-mreze {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linija-tamna);
}
.stopa-mreze a { text-decoration: none; }
.stopa-mreze a:hover { color: var(--na-tamnom); }

/* ── uvod (hero) ───────────────────────────────────────────────── */

.uvod {
  background: var(--noc);
  color: var(--na-tamnom);
  padding-block: clamp(56px, 9vw, 104px);
  border-bottom: 1px solid var(--linija-tamna);
}
.uvod .omot {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 60rem) {
  .uvod .omot { grid-template-columns: 1fr 1fr; }
}

.uvod-tekst { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }

.uvod h1 {
  font-size: clamp(2.25rem, 6.2vw, 3.75rem);
  line-height: 1.02;
}
/* Naslovni red je od mesinga: preliv tamni→svetli, i sjajna traka koja
   JEDNOM pređe preko slova pri učitavanju. Jednom je luksuz, u krug je
   reklama — zato `1`, ne `infinite`. (Ivanov izbor iz palete, 20.09.2026.)

   Ispuna se gasi SAMO unutar @supports: bez toga bi browser koji ne zna
   `background-clip: text` prikazao providna slova na providnoj podlozi,
   tj. prazan red. Ovako takav browser vidi punu mesing boju. */
.uvod h1 em {
  font-style: italic;
  color: var(--mesing-svetli);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .uvod h1 em {
    background: linear-gradient(100deg,
                var(--mesing-tamni) 0%, var(--mesing) 25%, #FFF3D0 45%,
                var(--mesing) 65%, var(--mesing-tamni) 100%);
    background-size: 280% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: odsjaj 2.2s ease-out .35s 1 both;
  }
}
@keyframes odsjaj {
  from { background-position: 180% 0; }
  to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .uvod h1 em { animation: none; background-position: 0 0; }
}

.uvod-podnaslov {
  font-size: var(--t-lg);
  color: var(--na-tamnom-tih);
  max-width: 32rem;
}

/* ── uvod sa fotografijom u pozadini ──────────────────────────────
   Smer je vlasnikov: poslao je 19.09.2026 svoju vizitku sa Vibera kao primer —
   tamna fotografija, zlatna slova preko nje, tanak mesingani ram. Sama vizitka
   ne ide na sajt: na njoj su troje ljudi, a saglasnost nemamo (pravilo A3).

   Do 20.09.2026 je fotografija stajala u okviru 4:3 pored teksta i popunjavala
   ga 74,9% — ostatak je bila prazna podloga. Sada ide preko cele širine, pa se
   taj gubitak i ne javlja.

   Tri sloja, svaki radi jedno:
     .uvod-pozadina   fotografija, `cover`, stišana na `--uvod-providnost`
     ::before         zastor, tamniji levo gde stoje slova
     ::after          ram, uvučen od ivice

   Zastor NIJE ravnomeran. Ravnomerno zatamnjenje bi ili progutalo fotografiju
   ili ostavilo slova na svetlom — ovako je levo skoro puna noć, a desno se
   salon vidi. Vrednosti ispod nisu birane na oko nego nameštene dok kontrast
   slova prema stvarno oslikanim pikselima nije prešao WCAG AA (mereno u
   browseru, 20.09.2026 — vidi LOG). */

:root {
  --uvod-providnost: .42;
}

.uvod-sa-slikom {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.uvod-pozadina {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.uvod-pozadina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--uvod-providnost);
  /* Malo preko ivice, da se odseku sami krajevi kadra. Fotografija je kvadrat
     1600x1600 u okviru odnosa oko 1,9:1, pa `cover` pokazuje PUNU širinu —
     vodoravnog prostora za pomeranje nema. Ovih 6% skida znak za izlaz koji je
     virio uz desnu ivicu, a na oštrinu ne utiče: uvećava se slika koja je i
     tako smanjena sa 1600 px. */
  transform: scale(1.06);
}
.uvod-sa-slikom::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg,
    var(--noc) 0%,
    rgba(22, 18, 13, .93) 30%,
    rgba(22, 18, 13, .74) 58%,
    rgba(22, 18, 13, .42) 100%);
}
.uvod-sa-slikom::after {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.5vw, 22px);
  z-index: 0;
  border: 1px solid var(--mesing-tamni);
  pointer-events: none;
}
.uvod-sa-slikom .omot { position: relative; z-index: 1; }

/* Tekstu treba nešto više od polovine: naslov je krupniji nego u starom uvodu,
   a „već od 36.900 dinara" u kurzivu je najduži red na strani. U pola širine
   je padao u tri reda, sa samom reči „dinara" u trećem. Desna kolona ostaje
   prazna namerno — kroz nju se vidi fotografija. */
/* Prelom je na 68rem, ne na 60rem kao kod ostalih uvoda: na 1024 px je tekst u
   koloni od 505 px lomio naslov u tri reda, sa rečju „dinara" samom u trećem.
   Preko cele širine tamo staje u dva. (Mereno 20.09.2026.)

   Prvi red gasi `.uvod .omot` iz medija upita na 60rem — bez njega bi na 1024 px
   i dalje stajale dve jednake kolone, pa bi tekst dobio 454 px umesto 960. */
.uvod-sa-slikom .omot { grid-template-columns: 1fr; }
@media (min-width: 68rem) {
  .uvod-sa-slikom .omot { grid-template-columns: minmax(0, 1.25fr) 1fr; }
}

/* Slova nose stranu, pa su krupnija nego u starom uvodu i imaju meku senku —
   ne zbog ukrasa nego zato što ispod njih prolazi fotografija. */
.uvod-sa-slikom h1 {
  font-size: clamp(2.4rem, 5.6vw, 3.6rem);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .6);
  text-wrap: balance;
}
.uvod-sa-slikom .nadnaslov { color: var(--mesing-svetli); }
.uvod-sa-slikom .uvod-podnaslov {
  color: var(--na-tamnom);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
}
.uvod-sa-slikom .uvod-podnaslov b { color: var(--mesing-svetli); }

/* Na telefonu je slika iza teksta preko cele širine, pa zastor mora da bude
   tamniji odozdo nagore, a ne s leva na desno — teksta ima preko cele širine. */
@media (max-width: 68rem) {
  /* Zastor je ovde blaži nego na desktopu. Prvi pokušaj je išao 0,90–0,93 i
     fotografija se na telefonu praktično nije videla — ostajala je crna ploča,
     a tražena je „blago smanjena providnost", ne zamračenje. Ove vrednosti su
     spuštene taman toliko da se garnitura nazire, a da slova i dalje prolaze
     AA sa dvostrukom rezervom (mereno 20.09.2026). */
  .uvod-sa-slikom::before {
    background: linear-gradient(180deg,
      rgba(22, 18, 13, .62) 0%,
      rgba(22, 18, 13, .78) 45%,
      rgba(22, 18, 13, .90) 100%);
  }
  /* Uspravan kadar seče `cover`-om na srednju četvrtinu širine. 58% po visini
     spušta rez na ugao garniture — na 35% je u tu četvrtinu padao zid. */
  .uvod-pozadina img { opacity: .62; object-position: 50% 58%; }
}

/* Ko je isključio animacije i efekte najčešće traži i miran prikaz: bez
   fotografije ispod slova ostaje čista noć. */
@media (prefers-reduced-transparency: reduce) {
  .uvod-pozadina { display: none; }
}

/* ── dugmad ────────────────────────────────────────────────────── */

.dugmad { display: flex; flex-wrap: wrap; gap: 12px; }

.dugme {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 2px;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s, color .18s, border-color .18s;
  cursor: pointer;
}
.dugme-glavno {
  background: var(--mesing);
  color: var(--noc);
}
.dugme-glavno:hover { background: var(--mesing-svetli); }

.dugme-obris {
  border-color: var(--linija-tamna);
  color: var(--na-tamnom);
}
.dugme-obris:hover { border-color: var(--mesing); color: var(--mesing-svetli); }

.dugme-tamno {
  background: var(--noc);
  color: var(--na-tamnom);
}
.dugme-tamno:hover { background: var(--noc-3); }

/* ── odeljci ───────────────────────────────────────────────────── */

.odeljak { padding-block: var(--ritam-odeljak); }
.odeljak-tamni {
  background: var(--noc);
  color: var(--na-tamnom);
}
.odeljak-krem { background: var(--krem-2); }

.odeljak-glava {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: var(--ritam-glava);
}
.odeljak-glava h2 { font-size: clamp(1.875rem, 4.5vw, var(--t-3xl)); line-height: 1.1; }
.odeljak-glava p { color: var(--na-svetlom-tih); max-width: var(--mera); }
.odeljak-tamni .odeljak-glava p { color: var(--na-tamnom-tih); }

/* Poziv u salon: adresa sa radnim danima, subota i potpis idu jedno ispod
   drugog (Ivan, 20.09.2026) — „da bude preglednije". Stoje u svom sklopu
   sa uzim razmakom nego sto `.odeljak-glava` daje svojim pasusima: ovo je
   jedan podatak u tri reda, a ne tri odvojena pasusa. Potpis dobija malo
   vazduha iznad, da se odvoji od radnog vremena. */
.poziv-podaci { display: grid; gap: 4px; }
.poziv-podaci p:last-child { margin-top: 8px; }

/* ── mreža proizvoda ───────────────────────────────────────────── */

.mreza {
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.kartica {
  display: flex;
  flex-direction: column;
  background: var(--krem);
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.odeljak-tamni .kartica, .odeljak-krem .kartica { background: var(--krem); }
.kartica:hover {
  border-color: var(--mesing);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px var(--senka);
}

.kartica-slika {
  aspect-ratio: 4 / 3;
  max-width: 100%;
  background: var(--krem-2);
  overflow: hidden;
  display: grid;
  place-items: center;
  grid-template-rows: 100%;
  border-bottom: 1px solid var(--linija-svetla);
  position: relative;   /* kotva za „Novo" oznaku */
}

/* „Novo u ponudi" — zlatna lenta (sash) ukoso preko gornjeg levog ugla kartice,
   u duhu grba i zlatnog preliva sa naslova početne. Spoljni element je kvadrat
   u uglu koji seče krajeve trake; unutrašnji span je sama traka, zarotirana.
   Pali se poljem `novo: true` u proizvodi.json. */
/* Spoljni okvir je ŠIRI nego VIŠI (128×78): traka tako preseca gornju ivicu
   dalje nego levu, pa ide pljoštimice — oštar ugao (~31°), ne 45°. */
/* Lenta u gornjem levom uglu. Krajevi se NE seku nasred slike: traka je taman
   toliko duga da oba kraja izađu PREKO ivica (levo i gore), pa ih seče samo
   `overflow: hidden` okvira slike — kao prava lenta koja ide van kadra, bez
   zasečenog ćoška. Ugao −30° (horizontalni krak veći od vertikalnog). */
.kartica-novo {
  position: absolute;
  top: 18px;
  left: -50px;
  width: 182px;
  z-index: 2;
  transform: rotate(-30deg);
  text-align: center;
  padding: 3px 0;
  background: linear-gradient(90deg,
              var(--mesing) 0%, #F2D777 24%, #FFF0B8 50%, #F2D777 76%,
              var(--mesing) 100%);
  color: var(--noc);
  font-family: var(--pismo-tekst);
  font-size: .53rem;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  border-block: 1px solid rgba(125, 98, 24, .55);
  box-shadow: 0 1px 5px rgba(22, 18, 13, .3);
  pointer-events: none;
}
/* contain, ne cover — fotografija nikad ne sme da bude odsečena.
   `grid-template-rows: 100%` nije ukras: bez njega se red mreze racuna po
   SADRZAJU, pa `height: 100%` na slici znaci „100% intrinsicne visine" i
   `object-fit: contain` nema sta da skracuje — uspravna fotografija se
   prelije preko okvira i `overflow: hidden` joj odsece noge. Merenjem
   18.09.2026: sve tri stolice su tako ostajale bez nogara iako u CSS-u
   pise contain. Isto vazi za svaki okvir nize koji drzi jednu fotografiju. */
.kartica-slika img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.strelica {
  font-family: var(--pismo-naslov);
  font-size: var(--t-lg);
  color: var(--mesing-tamni);
}
.kartica-kat .kartica-telo { padding-block: 26px 28px; }
.mreza-kat { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

.kartica-prazna {
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  padding: 16px;
  background: repeating-linear-gradient(135deg, var(--krem-2), var(--krem-2) 12px, var(--krem-3) 12px, var(--krem-3) 24px);
  height: 100%;
}
.kartica-prazna span {
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--na-svetlom-tih);
}

.kartica-telo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px 20px;
  flex: 1;
}
.kartica-ime {
  font-family: var(--pismo-naslov);
  font-size: var(--t-lg);
  line-height: 1.2;
}

/* Mehanizam (klik-klak, lift) nije deo imena nego oznaka vrste, pa silazi u red
   ispod i nosi manje slovo. U zagradi iza imena lomio je reč na kartici
   („(klik-” / „klak)”). Ime ostaje celo u naslovu strane i u Schema.org — vidi
   `pun_naziv` u gradi.py. */
.ime-dodatak {
  display: block;
  font-family: var(--pismo-tekst);
  font-size: 0.62em;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--na-svetlom-tih);
  margin-top: .28em;
  line-height: 1.25;
}
.proizvod-glava h1 .ime-dodatak {
  font-size: 0.42em;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-top: .55em;
}
/* Kartica kategorije je uska (četiri u redu), a u dnu joj stoje i broj modela i
   cena. U jednom redu se „12 modela" lomilo na dva, pa je „RSD" ispadalo van
   kartice. Na kartici kategorije idu jedno ispod drugog. */
.kartica-dim { white-space: nowrap; }
.kartica-kat .kartica-red {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.kartica-red {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--linija-svetla);
}
.kartica-dim {
  font-size: var(--t-sm);
  color: var(--na-svetlom-tih);
  font-variant-numeric: tabular-nums;
}
/* Cena se ističe težinom i razmakom, NE bojom. Od šest varijanti iz palete
   (20.09.2026) izabrana je ova jer jedina preživi štampu i ne pada na
   kontrastu: broj naraste, „RSD“ ode u sitan razmaknut versal, „od“ se
   stiša. Mereno: 14,4:1 na krem podlozi — najviše od svih ponuđenih. */
.cena {
  font-family: var(--pismo-naslov);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.015em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--na-svetlom);
}
.cena small {
  font-family: var(--pismo-tekst);
  font-size: .62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--na-svetlom-tih);
  margin-left: 4px;
}

/* „od“ nije deo iznosa nego ograda oko njega — pa ne nosi ni težinu ni
   veličinu broja. Bez ovoga „od 36.900“ čita se kao jedan dug broj. */
.cena-od {
  font-family: var(--pismo-tekst);
  font-style: normal;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--na-svetlom-tih);
  margin-right: 3px;
}

/* ── stranica proizvoda ────────────────────────────────────────── */

.putanja {
  font-size: var(--t-sm);
  color: var(--na-svetlom-tih);
  padding-block: 18px 0;
}
.putanja a { text-decoration: none; border-bottom: 1px solid var(--linija-svetla); }
.putanja a:hover { border-bottom-color: var(--mesing); }
.putanja span { margin-inline: 7px; color: var(--krem-3); }

.proizvod {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1fr;
  padding-block: var(--ritam-odeljak);
  align-items: start;
}
/* Snimak je TREĆE dete članka, ne dete leve kolone. Razlog je redosled na
   telefonu: tamo se kolone slažu jedna ispod druge, pa je snimak unutar leve
   kolone stajao IZNAD naziva i cene — kupac je prvo dobio video, pa tek onda
   šta gleda i pošto. Ovako na telefonu ide prirodnim redom (fotografije,
   podaci, snimak), a na širokom ekranu desna kolona pokriva oba reda, pa
   snimak popuni prazninu ispod galerije umesto da visi ispod cele strane. */
@media (min-width: 58rem) {
  .proizvod { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .proizvod > .proizvod-desno { grid-row: span 2; }
  .proizvod > .snimci { grid-column: 1; margin: 0; }
}

.galerija { display: flex; flex-direction: column; gap: 12px; }
.glavna-slika {
  aspect-ratio: 4 / 3;
  max-width: 100%;
  background: var(--krem-2);
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  overflow: hidden;
  display: grid;
  place-items: center;
  grid-template-rows: 100%;
}
.glavna-slika img { width: 100%; height: 100%; object-fit: contain; }

.galerija-trake {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: 10px;
}

/* jedinstven okvir za svaku sličicu — contain, pa se ništa ne seče */
.traka-polje {
  aspect-ratio: 4 / 3;
  background: var(--krem-2);
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  overflow: hidden;
  display: grid;
  place-items: center;
  grid-template-rows: 100%;
}
.odeljak-tamni .traka-polje { background: var(--noc-2); border-color: var(--linija-tamna); }
.traka-polje img { width: 100%; height: 100%; object-fit: contain; }

.proizvod-glava { display: flex; flex-direction: column; gap: 14px; }
.proizvod-glava h1 {
  font-size: clamp(2rem, 5.5vw, 2.875rem);
  line-height: 1.08;
}

.cena-veliko {
  font-family: var(--pismo-naslov);
  font-size: clamp(1.75rem, 5vw, var(--t-2xl));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cena-veliko small {
  font-family: var(--pismo-tekst);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--na-svetlom-tih);
}

/* specifikacija — preuzet raspored iz klijentovih tehničkih listova */
.spec {
  display: grid;
  border-top: 2px solid var(--noc);
}
.spec-red {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: 4px 18px;
  padding-block: 11px;
  border-bottom: 1px solid var(--linija-svetla);
}
@media (max-width: 26rem) {
  .spec-red { grid-template-columns: 1fr; }
}
.spec-oznaka {
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--na-svetlom-tih);
  font-weight: 500;
  padding-top: 3px;
}
.spec-vrednost { font-size: var(--t-md); }
.spec-da { color: var(--mesing-tamni); font-weight: 500; }
.spec-ne { color: var(--na-svetlom-tih); }

.upit {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  background: var(--noc);
  color: var(--na-tamnom);
  border-radius: 2px;
}
.upit h3 { font-size: var(--t-lg); }
.upit p { color: var(--na-tamnom-tih); font-size: var(--t-sm); }

/* ── traka isporuka ────────────────────────────────────────────── */

.traka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 10px;
}
/* Knjige uzoraka su uspravne — lepeza uzoraka je viša nego šira. U kvadratnom
   polju su ispadale kao tanak šlic, pa imaju svoju mrežu sa uspravnim okvirom i
   imenom knjige ispod. (19.09.2026.) */
/* Sve knjige u JEDAN red, koliko god ih ima (Ivan, 20.09.2026).
   Do tada je stajalo `repeat(auto-fill, minmax(min(46%, 9rem), 1fr))`, dakle
   najmanje 9rem po knjizi — sa sedam je to stajalo u red, a osma (Teddy) je
   pala u novi. Mereno: na 1280 px sedam pa jedna, na 1024 šest pa dve, na 768
   četiri pa četiri. Traka je zbog toga bila visoka 743 px umesto 240.
   `grid-auto-flow: column` deli širinu na onoliko kolona koliko ima knjiga, pa
   deveta ne bi ništa pomerila — isto pravilo koje na telefonu stoji od
   19.09.2026. */
.stof-traka {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 12px;
}
.stof-traka .stof-polje { margin: 0; }
/* `height: auto` je OBAVEZAN uz `aspect-ratio`. Bez njega se primenjuje
   `height` atribut sa same slike (`height="1493"`) — HTML atributi width/height
   ulaze kao CSS osobine niske težine, ali izričita visina i dalje pobeđuje
   `aspect-ratio`. Posledica je bila da su knjige uzoraka stajale u punoj visini
   izvora: na telefonu je traka bila **6284 px** (sedam i po ekrana samo štofa),
   a na desktopu 1623 px — knjiga viša od ekrana. Mereno 19.09.2026. */
.stof-traka .stof-polje img {
  width: 100%;
  height: auto;
  aspect-ratio: 45 / 100;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  background: var(--krem-2);
}
.stof-traka figcaption {
  padding-top: 7px;
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--na-svetlom-tih);
  line-height: 1.3;
}

/* Traka na početnoj nosi osam fotografija; `auto-fill` ih je na širokom ekranu
   slagao pet pa tri. Četiri i četiri stoji kao namera. (19.09.2026.) */
@media (min-width: 60rem) {
  .traka { grid-template-columns: repeat(4, 1fr); }
}

.isporuke-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 12px;
}
.isporuke-mreza .isporuka {
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  overflow: hidden;
  background: var(--krem-2);
  display: grid;
  place-items: center;
  grid-template-rows: 100%;
}
.isporuke-mreza img { width: 100%; height: 100%; object-fit: contain; }

/* ── štofovi ───────────────────────────────────────────────────── */

.stofovi-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 14px;
}
.stofovi-mreza figure.stof {
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  overflow: hidden;
  background: var(--krem-2);
  display: grid;
  place-items: center;
  grid-template-rows: 100%;
}
.stofovi-mreza img { width: 100%; height: 100%; object-fit: contain; }

/* ── izbornik boje (radio, bez JavaScripta) ────────────────────── */

.boje { display: flex; flex-direction: column; gap: 14px; }
.boja-radio { position: absolute; opacity: 0; pointer-events: none; }

.boje-table {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  background: var(--krem-2);
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  overflow: hidden;
}
/* Specifičnost namerno podignuta: tabla je sada <a class="boja-tabla zum">, a
   `a.zum` postavlja `position: relative` — bez pretka `.boje-table` ovde bi
   pobedilo to pravilo i sve nijanse bi se naslagale jedna ispod druge. */
.boje-table .boja-tabla {
  /* Nevidljiva tabla ne sme da hvata klik. Sve nijanse stoje jedna preko druge
     i razlikuju se samo providnošću — a providan element i dalje prima klik, pa
     je gornja u nizu gutala svaki klik: na Modeni se, koju god boju da izabereš,
     otvarala uvećana „Sivo crna" (izmereno `elementFromPoint`-om, 18.09.2026).
     Tiče se svih 15 izbornika, jer se otvaranje na klik dodaje svakoj tabli. */
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  grid-template-rows: 100%;
  opacity: 0;
  transition: opacity .25s;
}
.boja-tabla img { width: 100%; height: 100%; object-fit: contain; }

.boje-dugmad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.boje-oznaka {
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--na-svetlom-tih);
  font-weight: 500;
  margin-right: 4px;
}
.boja-dugme {
  padding: 7px 15px;
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
  user-select: none;
}
.boja-dugme:hover { border-color: var(--mesing); }

/* prikaži tablu i istakni dugme koji odgovaraju izabranom radiju */
.boja-radio:nth-of-type(1):checked ~ .boje-table .boja-tabla:nth-of-type(1),
.boja-radio:nth-of-type(2):checked ~ .boje-table .boja-tabla:nth-of-type(2),
.boja-radio:nth-of-type(3):checked ~ .boje-table .boja-tabla:nth-of-type(3),
.boja-radio:nth-of-type(4):checked ~ .boje-table .boja-tabla:nth-of-type(4),
.boja-radio:nth-of-type(5):checked ~ .boje-table .boja-tabla:nth-of-type(5),
.boja-radio:nth-of-type(6):checked ~ .boje-table .boja-tabla:nth-of-type(6) { opacity: 1; pointer-events: auto; }

.boja-radio:nth-of-type(1):checked ~ .boje-dugmad .boja-dugme:nth-of-type(1),
.boja-radio:nth-of-type(2):checked ~ .boje-dugmad .boja-dugme:nth-of-type(2),
.boja-radio:nth-of-type(3):checked ~ .boje-dugmad .boja-dugme:nth-of-type(3),
.boja-radio:nth-of-type(4):checked ~ .boje-dugmad .boja-dugme:nth-of-type(4),
.boja-radio:nth-of-type(5):checked ~ .boje-dugmad .boja-dugme:nth-of-type(5),
.boja-radio:nth-of-type(6):checked ~ .boje-dugmad .boja-dugme:nth-of-type(6) {
  background: var(--noc);
  border-color: var(--noc);
  color: var(--na-tamnom);
}

.boja-radio:focus-visible ~ .boje-dugmad .boja-dugme { outline: 1px dotted var(--mesing); }

/* ── razlozi ───────────────────────────────────────────────────── */

.razlozi {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
/* Šest razloga: bez ovoga `auto-fit` na širokom ekranu napravi četiri kolone,
   pa poslednji red ostane sa dva usamljena polja. Tri po tri stoji kao namera,
   a i tekst dobija širinu. (19.09.2026, kad je razloga postalo šest.) */
@media (min-width: 60rem) {
  .razlozi { grid-template-columns: repeat(3, 1fr); }
}
.razlog { display: flex; flex-direction: column; gap: 9px; }
.razlog-broj {
  font-family: var(--pismo-naslov);
  font-size: var(--t-2xl);
  line-height: 1;
  color: var(--mesing);
}
.razlog h3 { font-size: var(--t-lg); }
.razlog p { font-size: var(--t-sm); color: var(--na-tamnom-tih); }
.odeljak-krem .razlog p { color: var(--na-svetlom-tih); }

/* ── podatak koji čekamo ───────────────────────────────────────── */

.ceka {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 9px;
  border: 1px dashed var(--mesing-tamni);
  border-radius: 2px;
  background: rgba(201, 162, 39, .09);
  font-size: var(--t-sm);
  color: var(--mesing-tamni);
  font-style: italic;
}
.odeljak-tamni .ceka, .upit .ceka, .stopa .ceka {
  border-color: var(--mesing);
  color: var(--mesing-svetli);
}


/* ── kontakt ───────────────────────────────────────────────────── */

.kontakt-mreza {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.kontakt-stavka { display: flex; flex-direction: column; gap: 6px; }
.kontakt-stavka dt {
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--na-svetlom-tih);
  font-weight: 500;
}
.kontakt-stavka dd { margin: 0; font-size: var(--t-lg); }
.odeljak-tamni .kontakt-stavka dt { color: var(--na-tamnom-tih); }

/* ── stopa ─────────────────────────────────────────────────────── */

/* Ivične linije podnožja — svih pet poteza iz palete (Ivanov izbor,
   20.09.2026). Gornja nit ide kao ::before, NE kao `border-image`: kad se
   `border-image` jednom postavi, on preuzima SVE četiri ivice, pa bi donja
   mesing traka dobila isečen preliv umesto pune boje. */
.stopa {
  position: relative;
  background: var(--noc);
  color: var(--na-tamnom-tih);
  padding-block: var(--ritam-odeljak) 22px;
  font-size: var(--t-sm);
  border-bottom: 3px solid var(--mesing);
}
.stopa::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
              rgba(201, 162, 39, 0) 0%, var(--mesing) 22%,
              var(--mesing-svetli) 50%, var(--mesing) 78%,
              rgba(201, 162, 39, 0) 100%);
}
.stopa-mreza {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-bottom: 32px;
  border-bottom: 1px solid var(--linija-tamna);
}
/* Uspravne linije među kolonama tek od 52rem: ispod toga se kolone prelome
   jedna ispod druge, pa bi linija visila uz levu ivicu bez ičega s druge
   strane. */
@media (min-width: 52rem) {
  .stopa-mreza > div {
    border-left: 1px solid var(--linija-tamna);
    padding-left: 26px;
  }
  .stopa-mreza > div:first-child { border-left: 0; padding-left: 0; }
}
.stopa h4 {
  font-family: var(--pismo-tekst);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mesing-svetli);
  margin: 0 0 12px;
  font-weight: 500;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(201, 162, 39, .35);
  display: inline-block;
}
.stopa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.stopa a { text-decoration: none; }
.stopa a:hover { color: var(--na-tamnom); }

/* Dvostruka linija iznad sitnih slova: prva je `border-top`, druga je
   `box-shadow` razmaknut za 3 px — jeftinije od još jednog elementa. */
.stopa-dno {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  padding-top: 24px;
  margin-top: 6px;
  border-top: 1px solid var(--linija-tamna);
  box-shadow: 0 -4px 0 -3px var(--linija-tamna);
}
.footer-credit {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linija-tamna);
  width: 100%;
}
.footer-credit-label {
  color: var(--na-tamnom-tih);
  font-size: 12px;
  letter-spacing: .02em;
}
.footer-credit-link {
  font-family: var(--pismo-tekst);
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(105deg, var(--mesing-svetli), var(--mesing));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-decoration: none;
  transition: filter .2s;
}
.footer-credit-link:hover { filter: drop-shadow(0 2px 10px rgba(229, 201, 120, .45)); }

/* ── proza ─────────────────────────────────────────────────────── */

.proza { display: flex; flex-direction: column; gap: 18px; max-width: var(--mera); }
.proza h3 { font-size: var(--t-xl); margin-top: 12px; }
.proza p { color: var(--na-svetlom-tih); }
.odeljak-tamni .proza p { color: var(--na-tamnom-tih); }

/* Vlasnikov potpis sa njegove vizitke — „Vidimo se…" u kurzivu, mesingano.
   Zamenilo je „Javite se pre dolaska pa cemo pripremiti modele koji vas
   zanimaju" na pozivu u salon (Ivan, 20.09.2026, po vlasnikovoj poruci). */
.vidimo-se {
  font-family: var(--pismo-naslov);
  font-style: italic;
  font-size: 1.15em;
  color: var(--mesing-svetli);
  white-space: nowrap;
}

/* Zavrsna deviza vlasnika na strani salona (20.09.2026). Jedini red te
   strane koji nije obavestenje nego poziv, pa stoji odvojeno od proze —
   linija iznad i tamnije slovo, bez uvecanja, da ne konkurise naslovu. */
.proza .deviza {
  color: var(--na-svetlom);
  border-top: 1px solid var(--linija-svetla);
  padding-top: 18px;
  margin-top: 4px;
}

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

/* ── salon ─────────────────────────────────────────────────────── */

.salon-raspored {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: var(--ritam-celina);
}
@media (min-width: 52rem) {
  .salon-raspored { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}

.salon-podaci .kontakt-stavka { margin-bottom: 18px; }

/* Mapa ima dva pogleda: širi, da se vidi gde je to u gradu, i bliski, na kom
   se čita broj i ugao. Prebacuje ih sakriven checkbox — isto načelo kao meni
   na telefonu i izbornik boje, bez JavaScripta.

   Bliska mapa je `display: none` dok se ne zatraži. To nije samo štednja: dok
   je skrivena `loading="lazy"` je ne učitava, pa se kad se otkrije učita sa VEĆ
   poznatom veličinom okvira.

   Široka mapa NEMA `loading="lazy"`, i to je popravka: sa njim se ugradnja
   učitavala dok okvir još nije imao konačnu meru, pa je OpenStreetMap iscrtao
   mapu u gornjem levom uglu — 275×180 px u polju od 618×386, ostalo prazno, a
   igla sitna u ćošku. Ugradnja nema svoje računanje na promenu veličine, pa se
   to više nikad nije ispravilo. (Ivan, 21.09.2026: „igla se ne vidi".) */
.mapa-okvir { display: flex; flex-direction: column; gap: 8px; }
.mapa-prekidac { position: absolute; opacity: 0; width: 0; height: 0; }

.mapa-polje {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
}
.mapa-polje iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  background: var(--krem-2);
}
.mapa-blizu { display: none; }
.mapa-prekidac:checked ~ .mapa-polje .mapa-siroko { display: none; }
.mapa-prekidac:checked ~ .mapa-polje .mapa-blizu { display: block; }

.mapa-red {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mapa-dugme {
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  color: var(--na-svetlom-tih);
  transition: color .18s, border-color .18s;
}
.mapa-dugme:hover { color: var(--na-svetlom); border-color: var(--mesing-tamni); }
.mapa-prekidac:focus-visible ~ .mapa-red .mapa-dugme {
  outline: 2px solid var(--mesing);
  outline-offset: 3px;
}
.mapa-r-dalje { display: none; }
.mapa-prekidac:checked ~ .mapa-red .mapa-r-blize { display: none; }
.mapa-prekidac:checked ~ .mapa-red .mapa-r-dalje { display: inline; }
.mapa-napomena { font-size: var(--t-sm); color: var(--na-svetlom-tih); }

.salon-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 12px;
}
.salon-mreza .salon-polje {
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  overflow: hidden;
  background: var(--krem-2);
  display: grid;
  place-items: center;
  grid-template-rows: 100%;
}
.salon-mreza img { width: 100%; height: 100%; object-fit: contain; }

/* ═══════════════════════════════════════════════════════════════════
   CENOVNIK — sve cene na jednom mestu
   Cena je ovde glavni podatak, ne fusnota: stoji desno, u mesingu, i
   poravnata je po koloni (tabular-nums) da se brojevi mogu čitati
   odozgo nadole kao u cenovniku, a ne da se traže po redu.
   ═══════════════════════════════════════════════════════════════════ */

.cn-grupa { margin-top: var(--ritam-celina); }
.cn-grupa h3 {
  font-family: var(--pismo-naslov);
  font-size: var(--t-xl);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--noc);
}
.cn-grupa h3 span {
  font-family: var(--pismo-tekst);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--na-svetlom-tih);
}

.cn-tabela { display: grid; }
.cn-red {
  display: grid;
  /* Treća kolona je FIKSNE širine, ne `auto`. Svaki red je zasebna mreža, pa
     je sa `auto` šira cena skupljala prve dve kolone samo u svom redu:
     dimenzije taburea („2.000–2.500") počinjale su 50 px levlje od ostalih,
     stolica 13 px (izmereno 23.09.2026, Ivan primetio). 14,5rem je najšira
     cena na strani (221 px) plus rezerva. */
  grid-template-columns: minmax(9rem, 1.1fr) minmax(0, 1.4fr) 14.5rem;
  align-items: baseline;
  gap: 6px 20px;
  padding: 14px 10px 14px 4px;
  border-bottom: 1px solid var(--linija-svetla);
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.cn-red:hover, .cn-red:focus-visible { background: var(--krem-2); }
.cn-ime { font-family: var(--pismo-naslov); font-size: var(--t-md); }
.cn-dim {
  font-size: var(--t-sm);
  color: var(--na-svetlom-tih);
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cn-lezaj { color: var(--mesing-tamni); }
.cn-cena {
  font-family: var(--pismo-naslov);
  font-size: var(--t-xl);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--noc);
}
/* Isti potez kao na kartici, ali broj ostaje na var(--t-xl): on je već
   krupniji od 1.45rem sa kartice, pa bi ga izjednačavanje SMANJILO. */
.cn-cena small {
  font-family: var(--pismo-tekst);
  font-size: .62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--na-svetlom-tih);
  margin-left: 4px;
}
@media (max-width: 40rem) {
  .cn-red { grid-template-columns: 1fr auto; }
  .cn-dim { grid-column: 1 / -1; order: 3; }
}

/* cena na stranici proizvoda — pločica, da se ne izgubi uz naslov */
.cena-plocica {
  border-top: 2px solid var(--noc);
  border-bottom: 1px solid var(--linija-svetla);
  padding-block: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cena-uz { font-size: var(--t-sm); color: var(--na-svetlom-tih); margin: 0; }
.cena-uz a { color: var(--mesing-tamni); }

/* ═══════════════════════════════════════════════════════════════════
   ŠTOF ZA MODEL — koje knjige uzoraka važe baš za ovaj komad
   ═══════════════════════════════════════════════════════════════════ */

/* Blok štofova stoji ISPOD obe kolone, preko cele širine. Dok je stajao u
   desnoj koloni, uz specifikaciju, ta kolona je bila dvostruko duža od leve —
   pored galerije je zjapila prazna polovina strane, a sedam mustri se gurkalo u
   dve uske kolone. Preko cele širine stanu u jedan red i strana se skrati. */
.stof-izbor {
  margin-top: 8px;
  padding: 20px 22px;
  background: var(--krem-2);
  border-left: 3px solid var(--mesing);
}
.stof-izbor h3 { font-size: var(--t-lg); margin: 0 0 8px; }
.stof-izbor p { font-size: var(--t-sm); color: var(--na-svetlom-tih); margin: 0 0 12px; }
.stof-izbor p:last-child { margin-bottom: 0; }
.stof-izbor a { color: var(--mesing-tamni); }

/* Mustre baš za taj model. Ranije je ovde stajao samo spisak imena, pa je veza
   vodila na sve štofove salona — kupac Verone je za jedan dostupan štof dobijao
   četrnaest paleta. Sada se vidi tačno ono što se za taj model može izabrati. */
.stof-mustre {
  display: grid;
  /* 8.5rem, ne 9.5: blok stoji preko cele širine, pa sedam knjiga uzoraka
     (najviše koliko ijedan model ima) stane u jedan red umesto šest plus
     jedna usamljena u drugom. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.stof-mustra { margin: 0; }
/* Odnos nosi OKVIR, ne <img>: slika ima width/height atribute, pa `aspect-ratio`
   na njoj ne bi ni radio — prvi pokusaj je mustre razvukao u uske trake.
   Mustre su kvadratne (1600x1600) i staju cele, po pravilu da se nista ne isece. */
.stof-okvir {
  aspect-ratio: 1 / 1;
  background: var(--krem);
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  overflow: hidden;
  display: grid;
  place-items: center;
  grid-template-rows: 100%;
}
.stof-okvir img { width: 100%; height: 100%; object-fit: contain; }

/* Mustra se otvara na klik. Znak „+" u uglu kaže da je slika kliktava — bez
   njega niko ne proba. Na dodir se ne prikazuje hover, pa znak stoji uvek. */
/* Zum radi isto na mustri štofa i na fotografiji garniture — `.zum` je ono što
   okvir čini kliktavim, a klasa okvira ostaje njegova (stof-okvir, glavna-slika,
   boja-tabla, traka-polje, a od 19.09.2026 i isporuka, salon-polje,
   dodatno-polje). Zato selektori tih okvira NE smeju da traže `figure`: okvir
   je sada veza. */
a.stof-okvir, a.zum { position: relative; display: grid; cursor: zoom-in; }
.zum-znak {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  color: var(--krem);
  background: rgba(28, 24, 20, .62);
  border-radius: 50%;
  transition: background .15s ease;
}
a.zum:hover .zum-znak,
a.zum:focus-visible .zum-znak { background: rgba(28, 24, 20, .88); }
a.zum:focus-visible { outline: 2px solid var(--mesing); outline-offset: 2px; }
.stof-mustra figcaption {
  margin-top: 6px;
  font-size: var(--t-xs);
  color: var(--na-svetlom-tih);
  line-height: 1.35;
}
/* Kad je štof jedan, mustra ne treba da se razvuče preko cele širine. */
.stof-mustre:has(.stof-mustra:only-child) { grid-template-columns: minmax(0, 13rem); }

.stof-napomena { font-size: var(--t-sm); }

/* ═══════════════════════════════════════════════════════════════════
   SNIMCI — razvlačenje uživo
   Uspravni telefonski snimci; ograničeni po visini da ne progutaju
   ekran, i bez autoplay-a — sam se ne pokreće ni na mobilnom.
   ═══════════════════════════════════════════════════════════════════ */

.snimci { margin: 48px 0 8px; }
.snimci h3 { font-family: var(--pismo-naslov); font-size: var(--t-xl); margin: 0 0 6px; }
.snimci > p { color: var(--na-svetlom-tih); font-size: var(--t-sm); margin: 0 0 16px; }
.snimci-red { display: flex; gap: 14px; flex-wrap: wrap; }
.snimak {
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  background: var(--noc);
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   UZ GARNITURU — jastuci, taburei, dekoracija
   ═══════════════════════════════════════════════════════════════════ */

.odeljak-uz { margin-top: var(--ritam-celina); }
.odeljak-uz .odeljak-glava { margin-bottom: 16px; }
.odeljak-uz h3 { font-family: var(--pismo-naslov); font-size: var(--t-xl); margin: 0; }

.dodatno-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 12px;
}
.dodatno-mreza .dodatno-polje {
  margin: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--linija-svetla);
  border-radius: 2px;
  overflow: hidden;
  background: var(--krem-2);
  display: grid;
  place-items: center;
  grid-template-rows: 100%;
}
.dodatno-mreza img { width: 100%; height: 100%; object-fit: contain; }

/* Snimak u istoj mreži kao fotografije. Polje je kvadrat, a snimak uspravan,
   pa se uklapa `contain`-om kao i slika — ništa se ne iseca. Podloga je tamna
   jer je to i podloga snimka, pa se pojasevi sa strane ne vide kao rupa. */
.dodatno-mreza .dodatno-snimak { background: var(--noc); }
.dodatno-mreza .snimak {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}

/* Telefonski snimci su uspravni (9:16). Bez ograničenja širine takav video na
   širokom ekranu pojede ceo zaslon; ovako stoji kao telefon pored teksta. */
.snimak-uspravan { max-width: min(100%, 22rem); }

.snimci-raspored {
  display: flex;
  gap: clamp(18px, 3vw, 34px);
  align-items: flex-start;
  flex-wrap: wrap;
}
.snimci-uz { flex: 1 1 16rem; max-width: var(--mera); }
.snimci-uz p { color: var(--na-svetlom-tih); font-size: var(--t-sm); margin: 0 0 10px; }
.snimci-uz a { color: var(--mesing-tamni); }
.snimci-spisak {
  margin: 0 0 14px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-sm);
}
.snimci-spisak b { font-variant-numeric: tabular-nums; }
.snimci-napomena { border-left: 3px solid var(--mesing); padding-left: 12px; }

/* ── knjige uzoraka na opštoj strani ───────────────────────────── */

.knjige-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 18px;
  margin-bottom: var(--ritam-celina);
}
.knjiga { margin: 0; }
.knjiga .stof-okvir { background: var(--krem-2); }
.knjiga h3 { font-size: var(--t-base); margin: 10px 0 2px; }
.knjiga p { font-size: var(--t-xs); color: var(--na-svetlom-tih); margin: 0; line-height: 1.45; }

/* ── uvećana mustra ────────────────────────────────────────────────
   Bez JavaScripta, na `:target` — isto načelo kao izbornik boje. Klik bilo
   gde zatvara, jer povratna veza pokriva celu pozadinu. */

.lupa { display: none; }
.lupa:target {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 60;                      /* iznad zaglavlja, koje stoji na 40 */
  place-items: center;
  padding: clamp(12px, 4vw, 40px);
  background: rgba(24, 20, 16, .93);
}
.lupa-izlaz { position: absolute; inset: 0; cursor: zoom-out; }
.lupa-x {
  position: absolute;
  top: clamp(8px, 2vw, 20px);
  right: clamp(8px, 2vw, 20px);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  color: var(--krem);
  text-decoration: none;
  border: 1px solid rgba(245, 240, 232, .35);
  border-radius: 50%;
}
.lupa-x:hover { background: rgba(245, 240, 232, .12); }
.lupa-sadrzaj {
  position: relative;               /* iznad pozadinske veze */
  margin: 0;
  display: grid;
  gap: 12px;
  justify-items: center;
  max-width: min(94vw, 46rem);
}
/* width/height atributi na <img> se ovde poništavaju, pa slika zadrži svoj
   odnos i stane cela — ništa se ne iseca. */
.lupa-sadrzaj img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 76vh;
  border-radius: 2px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.lupa-sadrzaj figcaption {
  color: var(--krem);
  text-align: center;
  font-size: var(--t-sm);
  line-height: 1.5;
}
.lupa-sadrzaj figcaption strong { display: block; font-size: var(--t-base); }
.lupa-sadrzaj figcaption span { color: rgba(245, 240, 232, .72); }

@media (prefers-reduced-motion: no-preference) {
  .lupa:target .lupa-sadrzaj { animation: lupa-ulaz .18s ease-out; }
}
@keyframes lupa-ulaz { from { opacity: 0; transform: scale(.98); } }

/* ── radno vreme ───────────────────────────────────────────────────
   Pauza od 14 do 17 mora da se vidi na prvi pogled: ko dođe u 15h zatekao
   bi zatvoreno. Zato dani stoje jedan ispod drugog, a ne u jednom redu. */

.radno-vreme { margin: 0; display: grid; gap: 4px; }
.radno-vreme > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
}
.radno-vreme dt { margin: 0; font-weight: 400; color: inherit; }
.radno-vreme dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.radno-vreme > div:last-child dd { color: var(--na-svetlom-tih); }
.odeljak-tamni .radno-vreme > div:last-child dd,
.upit .radno-vreme > div:last-child dd { color: rgba(245, 240, 232, .66); }

/* ═══════════════════════════════════════════════════════════════════
   KONTAKT
   Prvo izdanje je bilo popis dt/dd sa podvučenim vezama — delovalo je kao
   izvod iz tabele. Sada su tri načina da se javite kartice koje se cele
   kliktaju: na telefonu je cela kartica cilj za prst, ne šest slova veze.
   ═══════════════════════════════════════════════════════════════════ */

.ikona { flex: none; display: block; }

.veze-mreza {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-bottom: var(--ritam-celina);
}
.veza-kartica {
  display: grid;
  gap: 4px;
  padding: 26px 24px 24px;
  background: var(--krem-2);
  border: 1px solid var(--linija-svetla);
  border-radius: 3px;
  text-decoration: none;
  transition: border-color .18s, background .18s, transform .18s;
}
.veza-kartica:hover {
  background: var(--krem);
  border-color: var(--mesing);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .veza-kartica { transition: border-color .18s, background .18s; }
  .veza-kartica:hover { transform: none; }
}
.veza-ikona {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 50%;
  color: var(--mesing-tamni);
  background: var(--krem);
  border: 1px solid var(--linija-svetla);
}
.veza-kartica:hover .veza-ikona { background: var(--mesing); color: var(--noc); border-color: transparent; }
.veza-oznaka {
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--na-svetlom-tih);
}
.veza-vrednost {
  font-family: var(--pismo-naslov);
  font-size: var(--t-lg);
  line-height: 1.25;
  color: var(--na-svetlom);
  overflow-wrap: anywhere;          /* duga e-adresa ne sme da razvuče karticu */
}
.veza-ispod { font-size: var(--t-sm); color: var(--na-svetlom-tih); margin-top: 4px; }

/* ── ploče: radno vreme i mreže ───────────────────────────────────── */

.kontakt-dole {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.ploca {
  padding: 26px 24px;
  background: var(--krem-2);
  border-left: 3px solid var(--mesing);
  border-radius: 0 3px 3px 0;
}
.ploca-naslov {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: var(--t-lg);
  color: var(--mesing-tamni);
}
.ploca-uvod { font-size: var(--t-sm); color: var(--na-svetlom-tih); margin-bottom: 16px; }
.ploca-napomena {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linija-svetla);
  font-size: var(--t-sm);
  color: var(--na-svetlom-tih);
}

/* Raspored, ne niz cifara: dan levo, sati desno, tanka linija između redova. */
.radno-vreme-ploca { gap: 0; }
.radno-vreme-ploca > div {
  padding: 9px 0;
  border-bottom: 1px solid var(--linija-svetla);
}
.radno-vreme-ploca > div:last-child { border-bottom: 0; padding-bottom: 0; }
.radno-vreme-ploca dt { font-size: var(--t-sm); color: var(--na-svetlom-tih); }
.radno-vreme-ploca dd { font-size: var(--t-md); font-weight: 500; }

.mreze { display: flex; flex-wrap: wrap; gap: 10px; }
.mreza-veza {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  background: var(--krem);
  border: 1px solid var(--linija-svetla);
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--t-sm);
  transition: background .18s, border-color .18s, color .18s;
}
.mreza-veza:hover { background: var(--noc); color: var(--na-tamnom); border-color: transparent; }

/* ── podaci o firmi ───────────────────────────────────────────────── */

.firma-mreza {
  margin: 0;
  display: grid;
  gap: 20px clamp(24px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.firma-mreza > div { display: grid; gap: 5px; align-content: start; }
.firma-siroko { grid-column: 1 / -1; }
/* Pun poslovni naziv preduzetnika je dugačak red; sam u jednoj koloni lomi se
   na četiri reda i razvuče ceo red. */
@media (min-width: 58rem) { .firma-duplo { grid-column: span 2; } }
.firma-mreza dt {
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--na-tamnom-tih);
}
.firma-mreza dd { margin: 0; font-size: var(--t-md); line-height: 1.5; }
.firma-mreza dd.broj { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* ═══════════════════════════════════════════════════════════════════
   TELEFON — doterivanje po merenju (19.09.2026)
   Sve ispod je posledica prolaza kroz svih 31 stranu na 390×844 i
   360×740. Vodoravnog skrola i izlaska iz kadra nije bilo nigde;
   ovo su stvari koje merenje jeste našlo.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 40rem) {
  /* ── veličina slova ─────────────────────────────────────────────
     Izmereno po broju slova na strani: na telefonu je glavnina teksta
     bila 14 px (`--t-sm`) — na strani proizvoda SAV tekst. To je ispod
     praga za čitanje sa telefona; struka uzima 16 px za tekivo teksta.
     Skala se ne menja globalno, nego samo dva najniža stepena i samo na
     uskim ekranima: 14 → 15 px i 12 → 13 px. Naslovi i telo (17 px) se ne
     diraju, pa se odnos među stepenima zadrži. Provereno posle izmene:
     nigde vodoravnog skrola niti izlaska iz kadra, na 360, 390 i 430 px. */
  :root { --t-sm: .9375rem; --t-xs: .8125rem; }

  /* ── dodirna meta ────────────────────────────────────────────────
     Veze u putanji i u podnožju su bile visoke 18–19 px. WCAG 2.5.8
     traži 24 px, a Apple HIG 44. Slova se NE uvećavaju — uvećava se
     samo polje koje prima prst, preko `padding-block`, pa se raspored
     ne pomera vidno. */
  .putanja a, .putanja { line-height: 1.9; }
  .putanja a { display: inline-block; padding-block: 5px; }
  .stopa a, .stopa-mreze a { display: inline-block; padding-block: 5px; }
  .stopa ul { gap: 2px; }

  /* Telefon i e-adresa su najvažniji dodiri na sajtu — na 19 strana su bili
     visoki 18 px. Isti postupak: polje raste, slova ostaju.

     `display` se NE dira. Prvo je ovde stajalo `display: inline-block` i to je
     oborilo kontakt kartice: `a.veza-kartica` je `display: grid` sa četiri reda
     (ikonica, oznaka, vrednost, opis), a `a[href^="tel:"]` ima veću težinu od
     `.veza-kartica`, pa je mreža postala jedan red — na telefonu je pisalo
     „POZOVITE060/511-3550Najbrže, u toku radnog vremena." bez preloma. Kartica
     sa mapom je izgledala ispravno jer njena adresa počinje sa `https:`, pa je
     pravilo nije ni pogađalo.

     Uspravna popuna na redovnoj vezi u tekstu ionako širi polje za dodir — ne
     pomera susedne redove, ali ulazi u meru pogotka. Provereno: veza je i dalje
     ≥ 24 px, a kartice su se vratile u četiri reda. */
  a[href^="tel:"], a[href^="mailto:"] { padding-block: 4px; }

  /* Veze sa strelicom („Gde je salon →") stoje same u redu, pa mogu da dobiju
     pun red bez posledica po prelom teksta. Veze USRED rečenice se namerno NE
     diraju: WCAG 2.5.8 ih izuzima, a povećanje bi razmaklo redove. */
  p > a:only-child[href$="/"], .stof-napomena a { display: inline-block; padding-block: 4px; }

  /* ── knjige uzoraka štofa na početnoj ────────────────────────────
     Na telefonu su stajale po dve u redu, u četiri reda — dugo skrolovanje
     kroz odeljak koji je samo najava (dole stoji dugme „Pogledaj štofove").
     Ivan, 19.09.2026: da ih suzimo i pokažemo sve jednu do druge kao na
     desktopu. `grid-auto-flow: column` to radi bez obzira koliko ih ima, pa
     osma knjiga ne pravi novi red nego se sve skupe.

     Ime knjige se na toj širini ne može pročitati — sedam kolona na 390 px daje
     46 px po knjizi, a „Mikrofiber – mikropliš" bi se lomilo u četiri reda i
     odeljak bi ponovo narastao. Zato natpis ide samo do telefona; imena stoje
     na strani štofova, do koje vodi dugme ispod trake. */
  .stof-traka {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-columns: none;
    gap: 5px;
  }
  .stof-traka figcaption { display: none; }

  /* ── radno vreme ─────────────────────────────────────────────────
     Red je bio „dan | sati" u mreži `minmax(0, 1fr) auto`, a sati su `nowrap`
     jer su tabelarni. Na 360 px „10:00–14:00 i 17:00–20:00" traži 214 px od
     296 koliko ploča ima unutra, pa je koloni za dan ostajalo 72 px — a
     „Ponedeljak – petak" traži oko 120. Dan se prelivao IZ svoje kolone i
     štampao preko sati. (Ivan, 19.09.2026: „brojevi gaze preko dana
     ponedeljak".) Mreža ne seče ono što se prelije, pa se ništa nije videlo
     kao greška u rasporedu — samo kao dva teksta jedan preko drugog.

     Na telefonu dan ide IZNAD sati. Isto za sva tri reda, da se subota i
     nedelja ne razlikuju od ponedeljka. */
  .radno-vreme > div { grid-template-columns: 1fr; gap: 1px; }
  .radno-vreme dd { white-space: normal; }
  .radno-vreme-ploca dt { font-size: var(--t-xs); letter-spacing: .06em; }

  /* ── lupa ────────────────────────────────────────────────────────
     Izmereno: na 390 px fotografija u lupi je bila 359×198 px, a ista
     ta fotografija na strani 358×198 — uvećanje od jednog piksela.
     Uzrok nije lupa nego oblik: fotografije garnitura su položene
     (1,8:1), a telefon je uspravan, pa „cela u kadru" znači „preko
     širine", a to je već bilo.

     Zato na telefonu lupa prestaje da uklapa sliku u ekran i pušta je
     u PRIRODNOJ visini, a ekran se pomera postrance. 72% visine ekrana
     na 1,8:1 daje oko 2,7 puta veću sliku nego na strani — tek to je
     uvećanje. `safe center` je bitan: obično `center` u mreži koja se
     skroluje odseca levi kraj slike, do kog se onda ne može doći. */
  .lupa:target {
    padding: 0;
    overflow: auto;
    place-items: safe center;
    overscroll-behavior: contain;
  }
  .lupa-sadrzaj { max-width: none; gap: 0; }
  .lupa-sadrzaj img {
    max-width: none;
    max-height: none;
    height: 72dvh;
    width: auto;
    border-radius: 0;
  }
  /* Natpis ostaje na ekranu dok se slika pomera postrance.
     `justify-self: start` je obavezan uz `sticky`: bez njega natpis nasledi
     `justify-items: center` figure, pa ga centriranje unutar slike od 1099 px
     odgurne na x=355 — van ekrana — i lepljivost ga tamo i drži. Izmereno. */
  .lupa-sadrzaj figcaption {
    position: sticky;
    left: 0;
    justify-self: start;
    width: 100vw;
    padding: 12px 16px 0;
    box-sizing: border-box;
  }
  /* Dugme za zatvaranje mora da ostane na ekranu, ne da otplovi sa slikom. */
  .lupa-x { position: fixed; top: 10px; right: 10px; }
}

/* ── početna na telefonu: po dve u redu (nv-56, Ivan 24.09.2026) ─────────
   Početna je na telefonu bila duga 13.693 px (~16 ekrana), jer su kartice
   kategorija, ugaone i isporuke stajale jedna ispod druge. Po dve u redu:
   7.952 px (izmereno uporedo, bez prelivanja kartica). Samo početna — strane
   kategorija ostaju kakve jesu. Na računaru četiri kategorije pune ceo red. */
@media (min-width: 60rem) {
  .je-pocetna .mreza-kat { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 40rem) {
  .je-pocetna .mreza-kat,
  .je-pocetna .mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .je-pocetna .kartica-telo { padding: 12px 12px 14px; }
  .je-pocetna .kartica-ime { font-size: 1.05rem; }
  .je-pocetna .kartica-red { flex-direction: column; align-items: flex-start; gap: 2px; }
  .je-pocetna .cena { font-size: 1.2rem; }
  .je-pocetna .traka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ── veća površina za klik u putanji i podnožju (nv-57, Ivan 24.09.2026) ───
   Veze su bile visoke 18–19 px, ispod preporučenih 24. Površina se širi
   nevidljivim slojem iznad i ispod veze — izgled i raspored se ne menjaju ni
   za piksel (padding bi pomerio podvlaku u putanji). */
.putanja a, .stopa a { position: relative; }
.putanja a::after, .stopa a::after { content: ""; position: absolute; inset: -4px -2px; }