/* =========================================================================
   Layout klon — tokeni izvučeni iz houseofhoney.com/studio
   Boje, grid i tipografska skala su 1:1. Tekst i slike su placeholderi.
   ========================================================================= */

/* ---------- PISMO (originalni fajlovi sa houseofhoney.com) ----------
   Fajlovi su subsetovani, pa Google zamjene ostaju kao rezerva za slova
   kojih u subsetu nema. */
@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/neue-haas-roman.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("fonts/neue-haas-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Canora";
  src: url("fonts/canora.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- TOKENI ---------- */
:root {
  /* Boje — direktno iz njihovog CSS-a */
  --base-dark-brown:  #2f2117;   /* toplija smedja; original sa sajta je #331917 */
  --base-blush-pink:  #f1e8dc;   /* bez roze - topla bez-bijela */
  --base-cream:       #fff8ef;
  --base-orange:      #ffeacf;
  --base-dark-green:  #003933;
  --base-light-green: #d8ce7e;
  --base-red:         #d1410f;
  --accent-pink:      var(--base-blush-pink);   /* beige umjesto drecavo roze */
  --accent-honey:     #edbc00;
  --accent-lime:      #aff552;
  --accent-konjak:    #85644e;   /* prigusena topla braon (orah) - pisani natpis na asortimanu */
  --page-black:       #0e0e0e;

  /* Tema stranice */
  --bg-primary:   var(--base-dark-brown);
  --bg-secondary: var(--base-blush-pink);
  --text-primary: var(--base-blush-pink);
  --text-on-light: var(--base-dark-brown);
  --accent:       var(--accent-pink);
  --veil:         color-mix(in srgb, var(--base-dark-brown) 30%, transparent);

  /* Prostor — kod njih je --spacing redefinisan na 1px, pa su sve
     Tailwind vrednosti bukvalno pikseli (px-8 = 8px, py-96 = 96px). */
  --gutter: 8px;          /* px-8  — spoljna margina stranice */
  --gutter-wide: 24px;    /* px-24 — hero i "collective" sekcija */
  --col-gap: 16px;        /* gap-x-16 — razmak kolona */
  --row-gap: 8px;         /* gap-8 */
  --section-y: 96px;      /* py-96 */
  --section-y-lg: 102px;  /* lg:py-102 */
  --card-pad: 96px;
  --nav-h: 32px;
  --topbar-h: clamp(44px, 3.6vw, 56px);

  /* Tipografska skala.
     Display (naslovi stranica i sekcija, hero, pisano) ostaje fluidan.
     SAV ostali sans tekst koristi samo tri velicine i tri tezine ispod. */
  --t-display: clamp(2.25rem, 4.23vw, 4.7rem);   /* H1 / veliki H2 */
  --t-h2:      clamp(1.9rem, 3.12vw, 3.5rem);
  --t-h3:      clamp(1.4rem, 2.15vw, 2.4rem);

  --t-sm:   0.875rem;  /* 14px - oznake, kartice, meni, sitan tekst */
  --t-base: 1rem;      /* 16px - osnovni tekst */
  --t-lg:   1.25rem;   /* 20px - podnaslovi, uvodi, istaknute vrijednosti */

  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;

  /* Pismo — originalni Noe Text / Neue Haas Grotesk / Canora sa njihovog
     servera; besplatne zamene ostaju kao rezerva. */
  --font-sans: "Neue Haas Grotesk", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  /* serif je sklonjen: naslovi su isti sans, samo deblji (medium 500) */
  --font-display: var(--font-sans);
  --weight-display: var(--w-medium);
  --font-script: "Canora", "Pinyon Script", cursive;
  /* Njihov teski geometrijski logotip je licenciran; Montserrat Black je
     najbliza besplatna zamjena i ima nasa slova. */
  --font-wordmark: "Montserrat", "Neue Haas Grotesk", Arial, sans-serif;

  --ease: cubic-bezier(.65, .05, .36, 1);
  --ease-hero: cubic-bezier(.76, 0, .24, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--topbar-h); }
body {
  margin: 0;
  background: var(--page-black);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.3;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }

/* Slike kreću blago umanjene i vraćaju se u prirodnu veličinu pri ulasku u kadar. */
.ph img,
.ph video {
  transform: scale(.82);
  transform-origin: center;
  transition: transform 1.2s var(--ease);
  will-change: transform;
}
.ph.is-visible img,
.ph.is-visible video {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .ph img,
  .ph video {
    transform: none;
    transition: none;
  }
}
a { color: inherit; text-decoration: none; }
/* Sekcije pocinju na dijelu piksela (visine zavise od vw), pa izmedju dvije
   iste boje zna ostati pukotina od djelica piksela - kroz nju bi prosijala
   skoro crna pozadina body-ja kao tanka siva linija. Bez podloga ispod
   sekcija sakrije tu pukotinu. */
main { background: var(--bg-secondary); }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

/* ---------- TIPOGRAFIJA ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  line-height: 1;
  /* sans u verzalu: -0.02em je bilo za serif, ovdje bi se slova dodirivala */
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1, .t-display { font-size: var(--t-display); }
h2 { font-size: var(--t-display); }
.t-h2 { font-size: var(--t-h2); }
h3, .t-h3 { font-size: var(--t-h3); }

/* Mali sans "eyebrow" nadnaslov */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* Uppercase serif blok teksta preko slike */
.lead {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  text-transform: uppercase;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Telo teksta u kartici */
.prose { display: flex; flex-direction: column; gap: 1em; font-size: var(--t-base); line-height: 1.3; }

/* ---------- GRID ---------- */
/* Osnovni 3-kolonski grid koji nosi ceo sajt */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.span-2 { grid-column: span 2; }
.col-3  { grid-column: 3; }

/* ---------- PLACEHOLDERI ZA SLIKE ---------- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
}
.ph::after {
  content: attr(data-size);
  position: absolute;
  inset-inline: 0;
  bottom: 10px;
  font-size: var(--t-sm);
  letter-spacing: .1em;
  opacity: .65;
}
.ph--dark { background: #2b2b2b; }
/* Na full-bleed slikama labela ide uz vrh da ne pada preko naslova */
.bg .ph { align-content: start; padding-top: 12vh; }

/* ---------- HEADER / NAVIGACIJA ---------- */

/* Mobilni: skriva se lista, ostaje logo + Menu */

/* ---------- HERO ---------- */

/* ---------- PINK SCRIPT MARQUEE ---------- */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
  /* vlastiti sloj za pomjeranje - inace telefon iznova iscrtava ogroman
     pisani tekst u svakom frejmu */
  will-change: transform;
  backface-visibility: hidden;
}
.marquee span {
  font-family: var(--font-script);
  /* jedinstvena boja/providnost za sav pisani (script) natpis na sajtu -
     ne vazi za .marquee--slika i .marquee--footer-ponosom, koji stoje
     preko fotografije/tamne pozadine i moraju ostati citljivi (krem/bijelo) */
  color: #6b5a4c;
  opacity: .45;
  font-size: clamp(7rem, 18vw, 20rem);
  line-height: .82;
  padding-inline: .12em;
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Kada sekcija izađe iz kadra, pisani natpis ostaje u svojoj liniji ali se
   zaustavlja na sredini. Inline transform postavlja pisano.js prema stvarnim
   dimenzijama učitanog fonta. */
.marquee--zaustavljen .marquee__track {
  animation: none;
}

/* Sve pisane trake imaju spor, urednički ritam. */
.marquee__track { animation-duration: 72s; }

/* ---------- RADOVI (mreza artikala) ----------
   Raspored preuzet sa "Projects" sekcije houseofhoney.com: nadnaslov i
   serifni naslov centrirani, pisani natpis prolazi iza njih, pa tri kolone
   sa uspravnim slikama. Kod njih je razmak medju kolonama samo 8px, a
   medju redovima 96px - slike se skoro dodiruju po sirini, a redovi disu. */
.radovi {
  background: var(--bg-secondary);
  color: var(--text-on-light);
  padding-bottom: var(--section-y-lg);
}

.radovi__glava {
  position: relative;
  overflow: hidden;
  padding-top: var(--section-y-lg);
  padding-inline: var(--gutter);
  text-align: center;
}
.radovi__glava .eyebrow { margin-bottom: clamp(14px, 1.6vw, 24px); }
.radovi__glava h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--weight-display);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Scena ispod naslova, centrirana, dovoljno udaljena od naslova iznad i
   pisanog natpisa ispod da oba dishu oko nje. */
.radovi__scena {
  position: relative;
  z-index: 1;
  display: block;
  margin: clamp(28px, 4vw, 56px) auto clamp(48px, 6vw, 88px);
  width: min(640px, 82vw);
  height: auto;
}

/* Ponavljani pisani natpis centriran ispod naslova, sa sporim pomjeranjem
   udesno. Negativni margin ga inace privuce uz baznu liniju naslova - kad
   izmedju stoji .radovi__scena, taj razmak vise nema smisla (vukao bi ga
   uz sliku umjesto uz naslov), pa se poništava. */
.marquee--radovi {
  margin-top: -.34em;
  padding-bottom: clamp(24px, 3vw, 56px);
}
.radovi__scena + .marquee--radovi { margin-top: 0; }
.marquee--radovi .marquee__track {
  justify-content: center;
  gap: clamp(56px, 10vw, 180px);
  margin-inline: auto;
  animation: marquee-o-nama-desno 48s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .marquee--radovi .marquee__track { animation: none; }
}
.marquee--radovi span {
  font-size: min(26vw, 46svh);
  line-height: .9;
  /* boja/opacity dolazi od zajednickog pravila .marquee span nize u fajlu
     (!important blok uz .marquee--ugradnja) - ovdje se ne ponavlja */
}

.radovi__mreza {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--section-y);
  padding-inline: var(--gutter);
}

.rad { margin: 0; }
/* cijela kartica je link: slika i natpis zajedno */
.rad__veza { display: block; color: inherit; }
.rad__veza .rad__slika img { transition: transform 1.1s var(--ease); }
.rad__veza:hover .rad__slika img { transform: scale(1.03); }
.rad__veza:hover figcaption h3 { text-decoration: underline; text-underline-offset: 4px; }
.rad__veza:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.rad__veza:hover { cursor: none; }
.rad__slika {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.radovi__kursor {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 76px;
  height: 76px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(.78);
  transition: opacity .2s var(--ease), transform .3s var(--ease);
  will-change: transform;
}
.radovi__kursor.is-visible {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}
@media (max-width: 767px), (pointer: coarse) {
  .radovi__kursor { display: none; }
  .rad__veza:hover { cursor: pointer; }
}
.rad__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rad figcaption {
  margin-top: clamp(14px, 1.5vw, 22px);
}
.rad figcaption h3 {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: var(--w-regular);
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.rad figcaption p {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.25;
  color: color-mix(in srgb, var(--base-dark-brown) 55%, transparent);
}

@media (max-width: 1023px) {
  .radovi__mreza {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(40px, 8vw, 72px);
  }
  .marquee--radovi span { font-size: 34vw; }
}

@media (max-width: 639px) {
  .radovi__mreza { grid-template-columns: minmax(0, 1fr); }
  /* --t-display ima dno na 2.25rem, sto je na uskom ekranu sire od
     samog ekrana - ovdje naslov mora da prati sirinu, pa i da se prelomi */
  .radovi__glava h2 { font-size: clamp(1.55rem, 7.4vw, 2.4rem); }
}

/* ---------- BIO (2 kolone) ---------- */
/* Centriran tekstualni blok - isti raspored kao zaglavlje na /o-nama.
   Ranije je ovo bila kartica sa slikom pored. */
.bio {
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: clamp(72px, 9vw, 148px) var(--gutter);
  text-align: center;
}
.bio .eyebrow { margin-bottom: clamp(14px, 1.6vw, 24px); }
.bio h2 { font-size: var(--t-display); }
.bio__tekst {
  max-width: 56ch;
  margin: clamp(30px, 3.4vw, 52px) auto 0;
  line-height: 1.45;
}

/* ---------- PRIZNANJA (braon pojas izmedju Kalkulatora i Radova) ----------
   Centriran nadnaslov i serifni naslov kao .radovi__glava, pa cetiri
   kartice sa tankim linijama kao .karta na /o-nama: oznaka gore, godina
   dolje velikim brojem. Podaci su sa mtponos.com/nagrade.php. */
.priznanja {
  background: var(--bg-secondary);
  color: var(--text-on-light);
  padding: clamp(56px, 7vw, 104px) var(--gutter) clamp(48px, 6vw, 92px);
}
/* ista mreza kao /o-nama: cetiri kolone, dva reda, kartice stepenasto
   (1. i 3. gore, 2. i 4. dolje); linije se dodiruju samo uglovima */
.priznanja__mreza {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(clamp(170px, 18vw, 272px), auto);
}
.priznanja .karta:nth-child(1) { grid-column: 1; grid-row: 1; }
.priznanja .karta:nth-child(2) { grid-column: 2; grid-row: 2; }
.priznanja .karta:nth-child(3) { grid-column: 3; grid-row: 1; }
.priznanja .karta:nth-child(4) { grid-column: 4; grid-row: 2; }
.cta.priznanja__dugme { margin-top: clamp(26px, 3vw, 44px); }
@media (max-width: 767px) {
  .priznanja__mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .priznanja .karta:nth-child(n) { grid-column: auto; grid-row: auto; }
  .priznanja .karta { min-height: clamp(150px, 42vw, 210px); gap: 20px; }
}

/* ---------- NAGRADE (/o-nama) ----------
   Mreza i zaglavlje su .priznanja; ispod ide red fotografija certifikata. */
.nagrade { padding-top: clamp(24px, 3vw, 48px); }
.nagrade__foto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
  margin-top: clamp(40px, 5vw, 80px);
}
.nagrade__foto figure { margin: 0; }
.nagrade__foto .ph { aspect-ratio: 4 / 5; }
.nagrade__foto img { width: 100%; height: 100%; object-fit: cover; }
.nagrade__foto figcaption {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nagrade__foto figcaption b { font-weight: var(--w-medium); }
@media (max-width: 767px) {
  .nagrade__foto { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
}

/* ---------- POJAS U RAZVOJU (naslovna, posle Priznanja) ----------
   Braon pojas, linije drveta jedva vidljive, sitna oznaka na sredini. */
.uskoro {
  /* .uskoro__drvo mjeri pojas (cqw/cqh) i zna da li je uspravan ili polozen */
  container: uskoro / size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(420px, 56vw, 800px);
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
}
/* SVG je uspravan; kad je pojas siri nego visok, okrene se 90 stepeni */
.uskoro__drvo {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 100cqw;
  height: 100cqh;
  background: url("images/drvo.svg") center / cover no-repeat;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
@container uskoro (orientation: landscape) {
  .uskoro__drvo {
    width: 100cqh;
    height: 100cqw;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
.uskoro__oznaka {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .1em;
  opacity: .4;
}

/* Akcija je deo braon pojasa sa drvenom teksturom, kao na uvodnoj skici. */
.uskoro--akcija {
  min-height: 0;
  height: auto;
  padding: clamp(72px, 9vw, 148px) var(--gutter-wide);
  align-items: stretch;
}
.uskoro__akcija-sadrzaj {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-primary);
  text-align: center;
}
.uskoro--akcija .kvalitet__naslov,
.uskoro--akcija .kvalitet__proza { color: var(--text-primary); }
.uskoro--akcija .kvalitet__slika { --g: 1; }
.uskoro--akcija .kvalitet__okvir { transform: none; }
.uskoro--akcija .kvalitet__dugme { color: var(--text-primary); }

@media (min-width: 768px) {
  .uskoro--akcija .kvalitet__slika { width: clamp(180px, 24vw, 300px); }
}

/* ---------- PERSPEKTIVA (tekst preko full-bleed slike) ---------- */
.perspective {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: var(--section-y) var(--gutter);
  color: #fff;
  display: flex;
  flex-direction: column;
}
.perspective .bg { position: absolute; inset: 0; z-index: -2; }
.perspective .bg .ph { width: 100%; height: 100%; }
.perspective::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}
.perspective__body { display: flex; flex-direction: column; gap: 1.4em; }

/* ---------- KVALITET (uredjivacka strana, po uzoru na modni editorijal) ----------
   Sve u jednoj osi: veliki serif naslov, mala uspravna fotografija u sredini
   sa sitnim okrenutim natpisom uz lijevu ivicu, kratak tekst ispod.
   Nista ne klizi. Slika stoji na svom mjestu i raste iz male (40%) do pune
   velicine dok joj sredina putuje od dna do sredine ekrana. JS upisuje
   napredak 0-1 u --g (ublazeno ~600ms); bez JS-a i uz smanjenu animaciju
   --g ostaje 1, tj. slika je odmah puna. */
.kvalitet {
  --g: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* mnogo vazduha iznad i ispod - sekcija disu izmedju tamnih pojaseva */
  padding: clamp(140px, 16vw, 240px) var(--gutter-wide);
  background: var(--bg-secondary);
  color: var(--text-on-light);
  text-align: center;
}

.kvalitet__naslov {
  max-width: 17ch;           /* uvijek u dva reda, kao na referenci */
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(2.6rem, 6.4vw, 6.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* fotografija + natpis; natpis je izvan toka, pa slika ostaje tacno u sredini.
   Omotac uvijek zauzima punu velicinu slike - rast ide kroz transform, pa se
   tekst ispod ne pomjera dok slika raste. */
.kvalitet__slika {
  position: relative;
  width: clamp(130px, 15vw, 220px);
  margin-block: clamp(56px, 7vw, 110px);
}

/* slika je veza na laminate - bez hover efekta, samo jasan fokus za tastaturu */
.kvalitet__veza { display: block; }
.kvalitet__veza:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }

.kvalitet__okvir {
  margin: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  /* 40% -> 100%, iz sredine svog mjesta */
  transform: scale(calc(.4 + .6 * var(--g)));
  will-change: transform;
}
.kvalitet__okvir img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 4:5 snimak u 2:3 okviru - sijece se lijeva strana (prazna podloga i
     znak u uglu), daske ostaju */
  object-position: 100% 50%;
}

.kvalitet__brendovi {
  position: absolute;
  right: calc(100% + 12px);
  bottom: 0;
  /* citanje odozdo nagore, kao na uredjivackim stranama */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kvalitet__proza {
  max-width: 34ch;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.45;
  text-wrap: balance;
}

/* Vidljivo samo citacima ekrana - uspravni natpis je ukras pa je skriven
   od njih, a isti podatak treba da postoji u citljivom obliku. */
.vidljivo-za-citace {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .kvalitet__slika { width: 19vw; }
}

@media (max-width: 767px) {
  .kvalitet__slika { width: 38vw; margin-block: 48px 40px; }
  /* slika je ovdje niska (~200px) - gusci natpis da ne bude visi od nje */
  .kvalitet__brendovi { letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  .kvalitet__okvir { transform: none; }
}

/* Desktop (1024px+): ekran podijeljen na dvije polovine, sekcija niska
   (najvise pola ekrana). Lijevo slika preko cijele polovine, uz ivicu;
   desno naslov i opisni tekst jedan ispod drugog, centrirani vodoravno i
   uspravno. Telefon i tablet ostaju centrirani u jednoj koloni.
   Slika krece kao manji pravougaonik (60%) na bez podlozi i kroz isti --g
   raste dok ne popuni cijelu lijevu polovinu. */
@media (min-width: 1024px) {
  .kvalitet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* prazni redovi gore i dole centriraju tekst po visini */
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      "slika ."
      "slika naslov"
      "slika proza"
      "slika dugme"
      "slika .";
    /* mnogo praznog prostora iznad i ispod; slika i dalje uz lijevu ivicu */
    padding: clamp(140px, 13vw, 240px) 0;
    text-align: center;
  }

  .kvalitet__slika {
    grid-area: slika;
    width: 100%;
    /* visinu nosi slika, a ne sekcija - padding iznad dodaje vazduh */
    height: min(33vw, 50svh);
    margin: 0;
  }
  .kvalitet__veza { height: 100%; }
  .kvalitet__okvir {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
    /* manji pravougaonik na bez podlozi -> puna polovina; isti procenat po
       obje ose, kao sirenje slike na /o-nama */
    clip-path: inset(calc(20% * (1 - var(--g))));
    will-change: clip-path;
  }
  .kvalitet__okvir img {
    /* niski vodoravni kadar - daske u sredini, znak iz donjeg ugla ispada */
    object-position: 50% 50%;
    transform: scale(calc(1 + .06 * (1 - var(--g))));
  }

  .kvalitet__naslov {
    grid-area: naslov;
    justify-self: center;
    max-width: 16ch;
    padding-inline: var(--gutter-wide);
    font-size: clamp(2.5rem, 4.2vw, 5rem);
  }

  .kvalitet__proza {
    grid-area: proza;
    justify-self: center;
    margin-top: clamp(16px, 1.8vw, 32px);
    padding-inline: var(--gutter-wide);
  }

  .kvalitet__dugme {
    grid-area: dugme;
    justify-self: center;
  }

  /* natpis sa brendovima uz desnu ivicu slike, pri dnu */
  .kvalitet__brendovi {
    right: auto;
    left: calc(100% + 14px);
    bottom: clamp(20px, 2.4vw, 40px);
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .kvalitet__okvir { clip-path: none; }
  .kvalitet__okvir img { transform: none; }
}

/* ---------- AKCIJA: Kvalitet u ogledalu ----------
   Telefon: centrirano kao Kvalitet, samo uspravni natpis stoji desno od slike.
   Desktop: tekst lijevo, slika desno uz ivicu, natpis uz lijevu ivicu slike. */
.kvalitet--obrnuto .kvalitet__brendovi {
  right: auto;
  left: calc(100% + 12px);
}
.kvalitet--obrnuto {
  background: var(--bg-primary);
  color: var(--text-primary);
}
@media (min-width: 1024px) {
  .kvalitet--obrnuto {
    grid-template-areas:
      ". slika"
      "naslov slika"
      "proza slika"
      ". slika";
  }
  .kvalitet--obrnuto .kvalitet__brendovi {
    left: auto;
    right: calc(100% + 14px);
  }
  /* uspravna fotografija u niskom kadru: uzorci u sredini, malo ispod pola */
  .kvalitet--obrnuto .kvalitet__okvir img { object-position: 50% 58%; }
}

/* Dugme ispod teksta - isti pravougaonik kao "Zatrazi ponudu" u traci,
   samo krupniji jer stoji sam u sekciji. */
/* dupla klasa: .cta u traci ima margin-left:auto i stoji kasnije u fajlu */
.cta.kvalitet__dugme {
  margin: clamp(28px, 2.6vw, 44px) 0 0;
}
/* ispod 1024px .cta u traci postaje kvadrat bez teksta - ovo dugme ne */
.kvalitet__dugme .cta__box {
  width: auto;
  height: clamp(40px, 3vw, 48px);
  padding-inline: clamp(18px, 1.8vw, 28px);
}
.kvalitet__dugme .cta__tekst {
  display: inline;
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
}
@media (min-width: 1024px) {
  .kvalitet--obrnuto {
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      ". slika"
      "naslov slika"
      "proza slika"
      "dugme slika"
      ". slika";
  }
  .kvalitet__dugme { grid-area: dugme; justify-self: center; }
}

/* ---------- COLLECTIVE ---------- */
.collective {
  position: relative;
  background: var(--bg-primary);
  min-height: 100svh;
  padding: var(--section-y-lg) var(--gutter-wide);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.collective .eyebrow { margin-bottom: 22px; }
.collective__head { width: 72%; margin-inline: auto; }
.collective .marquee {
  margin-block: 2vw;
  padding-block: .18em;
  overflow: visible;
}
.collective .marquee span {
  line-height: .98;
}
/* Traka uzoraka dekora ispod pokretnog natpisa. Kvadrati su namjerno
   sitni - pet uzoraka u jednom redu, bez potpisa, samo boje i sare. */
.dekori {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1vw, 18px);
  margin-top: clamp(30px, 3.6vw, 56px);
}
.dekor {
  width: clamp(60px, 8.2vw, 136px);
  aspect-ratio: 1;
  overflow: hidden;          /* drzi uvecanje unutar kvadrata */
}
.dekor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* jedan za drugim, da traka ne skoci odjednom */
.dekori .ph:nth-child(2) img { transition-delay: .08s; }
.dekori .ph:nth-child(3) img { transition-delay: .16s; }
.dekori .ph:nth-child(4) img { transition-delay: .24s; }
.dekori .ph:nth-child(5) img { transition-delay: .32s; }

/* ---------- KONTAKT ----------
   Tri pojasa: glava sa pisanim natpisom iza naslova, par kartica
   (tamna izjava + svijetla forma) i zavrsna traka preko slike. */
.kontakt {
  background: var(--bg-secondary);
  color: var(--text-on-light);
  /* razmak do footera mora biti unutar sekcije - margina bi propustila
     crnu pozadinu stranice izmedju bez trake i tamnog footera */
  padding-bottom: clamp(64px, 9vw, 140px);
}

.kontakt__glava {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 7vw, 102px) var(--gutter) 0;
  text-align: center;
}
.kontakt__glava .eyebrow { margin-bottom: clamp(14px, 1.6vw, 24px); }
.kontakt__glava h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--weight-display);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.marquee--kontakt {
  margin-top: -.34em;
  padding-bottom: clamp(18px, 2.2vw, 40px);
}
/* ovaj natpis se lista brze od ostalih: 13s umjesto 26s */
.marquee--kontakt .marquee__track { animation-duration: 72s; }
.marquee--kontakt span {
  font-size: min(24vw, 42svh);
  line-height: .9;
  /* boja/opacity dolazi od zajednickog pravila nize u fajlu */
}

/* ---- par kartica ----
   Kartice su uze od stranice, a iza njih stoji zamucena slika terase.
   Zamucenje ide filterom na ::before; sloj je malo uvecan (scale) jer
   blur razvodni ivice pa bi se inace vidio svijetli okvir. */
.kontakt__par {
  position: relative;
  isolation: isolate;
  /* zamucena pozadina je uvecana na 108% (da se ne vide mutne ivice) - bez
     ovoga viri ~57px van ekrana i pravi bocni scroll */
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  /* zamucena pozadina ostaje preko cijele sirine, a sama dva bloka se
     zadrzavaju na 1120px i nize su nego prije */
  padding-block: clamp(24px, 3.4vw, 56px);
  padding-inline: max(clamp(16px, 6vw, 120px), calc((100% - 1020px) / 2));
}
.kontakt__par::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/rast.webp") center / cover no-repeat;
  filter: blur(16px) brightness(.82) saturate(.9);
  transform: scale(1.08);
}

.kontakt__izjava {
  display: flex;
  /* naslov pa ispod njega dugme - oboje centrirano */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 3.2vw, 52px) clamp(20px, 2.2vw, 36px);
  background: var(--bg-primary);
  color: var(--text-primary);
  text-align: center;
}
.kontakt__izjava h3 {
  max-width: 15ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--weight-display);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* dugme ispod naslova u tamnoj kartici: vodi na kalkulator na naslovnoj */
.kontakt__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(22px, 2.4vw, 34px);
  padding: clamp(11px, 1vw, 14px) clamp(18px, 1.8vw, 26px);
  border: 1px solid color-mix(in srgb, var(--text-primary) 55%, transparent);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.kontakt__cta i { font-style: normal; transition: transform .35s var(--ease); }
.kontakt__cta:hover,
.kontakt__cta:focus-visible {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-primary);
  outline: none;
}
.kontakt__cta:hover i,
.kontakt__cta:focus-visible i { transform: translateX(4px); }

.kontakt__forma {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 32px);
  background: var(--base-cream);
  color: var(--text-on-light);
}
/* slicica u gornjem desnom uglu, kao na predlosku */
.kontakt__slicica {
  align-self: flex-end;
  width: clamp(76px, 8vw, 108px);
  /* height auto: inace height atribut na <img> nadjaca aspect-ratio */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-bottom: auto;
}
.kontakt__uvod {
  margin: clamp(24px, 2.8vw, 42px) 0 clamp(14px, 1.6vw, 22px);
  font-family: var(--font-sans);
  font-size: var(--t-base);
}

/* ---- forma ---- */
.forma { display: flex; flex-direction: column; }
.forma__polje {
  width: 100%;
  padding: clamp(10px, 1vw, 14px) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.3;
  transition: border-color .35s var(--ease);
}
.forma__polje::placeholder { color: color-mix(in srgb, var(--base-dark-brown) 50%, transparent); }
.forma__polje:focus {
  outline: none;
  border-bottom-color: var(--base-dark-brown);
}
.forma__polje--veliko { resize: vertical; min-height: 3.8em; }

.forma__slanje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  margin-top: clamp(16px, 1.8vw, 26px);
  padding: clamp(10px, 1vw, 14px) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  text-align: left;
  cursor: pointer;
}
.forma__strelica {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.forma__slanje:hover .forma__strelica {
  background: var(--base-dark-brown);
  color: var(--base-cream);
  transform: translateX(3px);
}
.forma__biljeska {
  margin-top: 14px;
  min-height: 1.3em;
  font-size: var(--t-sm);
  opacity: .7;
}

/* ---- zavrsna traka ----
   Bez podloga kao vrh stranice, bez slike; razmak ispod je odvaja od
   tamnog footera. */
.kontakt__traka {
  background: var(--bg-secondary);
  color: var(--text-on-light);
  display: grid;
  place-items: center;
  padding-block: clamp(72px, 9vw, 150px);
}
.kontakt__pozdrav {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
}
.kontakt__pozdrav-gore {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.kontakt__pozdrav-pisano {
  display: block;
  margin-top: -.06em;
  font-family: var(--font-script);
  font-size: clamp(3.4rem, 9vw, 8rem);
  line-height: 1.05;
}

/* ---------- KALKULATOR (naslovna: brzi proracun) ----------
   Isti raspored kao blok na /kontakt: dvije kartice preko zamucene slike
   (.kontakt__par, .kontakt__izjava, .kontakt__forma). Lijevo tamna kartica sa
   nadnaslovom, naslovom i uvodom; desno krem kartica sa proracunom. Sitna
   slika gore desno se mijenja sa izabranim proizvodom. */
.kalkulator {
  background: var(--bg-secondary);
  color: var(--text-on-light);
  padding-block: clamp(48px, 5vw, 80px);
}

/* Kartice su uze i nize nego isti blok na /kontakt - ovo je proracun,
   ne poziv na akciju, pa ne treba da zauzima cijeli ekran. */
.kalkulator .kontakt__par {
  padding-block: clamp(12px, 1.5vw, 24px);
  padding-inline: max(clamp(16px, 6vw, 120px), calc((100% - 760px) / 2));
}
.kalkulator .kontakt__izjava { padding: clamp(22px, 2.2vw, 34px) clamp(16px, 1.7vw, 26px); }
.kalkulator .kontakt__forma { padding: clamp(16px, 1.7vw, 24px); }
.kalkulator .kontakt__slicica { width: clamp(52px, 4.6vw, 68px); }
.kalkulator .kontakt__uvod { margin: clamp(12px, 1.4vw, 20px) 0 clamp(8px, .9vw, 12px); }
/* umanjeno: sitniji tekst i polja nego ista kartica na /kontakt */
.kalkulator .kontakt__forma { font-size: var(--t-base); }
.kalkulator .kontakt__uvod,
.kalkulator .forma__polje,
.kalkulator .forma__slanje,
.kalkulator .racun__rezerva-tekst { font-size: inherit; }
.kalkulator .racun__rezultati dd { font-size: var(--t-lg); }

/* ---- polja su tanki pravougaonici ----
   Na /kontakt je svako polje samo linija ispod sebe. Ovdje ih je vise (izbor
   poda, duzina, sirina) pa je kartica bila ispresijecana linijama pod svakim
   poljem, plus jos dvije linije iznad rezultata i iznad dugmeta. Sada je
   svako polje tanak pravougaonik, a vodoravnih linija nema ni jedne. */
.kalkulator .forma__polje {
  padding: clamp(11px, 1.1vw, 15px) clamp(12px, 1.2vw, 16px);
  border: 1px solid color-mix(in srgb, var(--base-dark-brown) 18%, transparent);
}
.kalkulator .forma__polje:focus { border-color: var(--base-dark-brown); }
.kalkulator .forma__polje[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--base-dark-brown) 45%, transparent);
}
/* strelica padajuce liste ulazi unutar pravougaonika */
.kalkulator .racun__izbor {
  padding-right: 40px;
  background-position: right clamp(12px, 1.2vw, 16px) center;
}
/* rezultati i dugme vise ne nose liniju iznad sebe - razmak ih dijeli */
.kalkulator .racun__rezultati { border-top: 0; }
.kalkulator a.forma__slanje {
  justify-content: space-between;
  margin-top: clamp(18px, 1.9vw, 26px);
  padding: clamp(11px, 1.1vw, 15px) clamp(12px, 1.2vw, 16px);
  border: 1px solid color-mix(in srgb, var(--base-dark-brown) 18%, transparent);
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.kalkulator a.forma__slanje:hover { border-color: var(--base-dark-brown); }
/* dugme je vec pravougaonik - strelici unutra ne treba i svoj okvir */
.kalkulator .forma__strelica { width: auto; height: auto; border: 0; }
.kalkulator a.forma__slanje:hover .forma__strelica {
  background: none;
  color: inherit;
  transform: translateX(4px);
}

/* ---- zamucena pozadina prati izabrani pod ----
   Dva sloja jedan preko drugog: ::before drzi sliku koja se vidi, ::after onu
   koja dolazi. kalkulator.js upise novu sliku u sloj koji je sakriven pa
   zamijeni klasu, i pozadina se pretopi. background-image se ne moze
   animirati, zato dva sloja umjesto jednog. */
.kalkulator .kontakt__par {
  --slika-a: url("images/kalkulator/tekstura/krono-original-5953-herringbone-8mm.webp");
  --slika-b: none;
}
.kalkulator .kontakt__par::before,
.kalkulator .kontakt__par::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  transition: opacity .55s var(--ease);
}
/* Svaki sloj nosi svoja pravila kroz promjenljive, ne samo sliku. Zato sto
   dva susjedna izbora mogu biti razlicitog tipa: ako proizvod ima teksturu,
   pozadina je izostrena i ponavlja se kao pod; ako nema (zasad samo Tarkett),
   ostaje prostorna slika rastegnuta i jako zamucena. kalkulator.js upise sve
   cetiri vrijednosti za svaki izbor; ove ovdje vaze samo dok se JS ne ucita,
   pa su postavljene za teksturu - takva je prva opcija i skoro sve ostale. */
.kalkulator .kontakt__par::before {
  background-image: var(--slika-a);
  background-size: var(--velicina-a, clamp(420px, 50vw, 760px));
  background-repeat: var(--ponavljanje-a, repeat);
  filter: var(--filter-a, brightness(.85) saturate(.96));
  transform: var(--uvecanje-a, none);
}
.kalkulator .kontakt__par::after {
  background-image: var(--slika-b);
  background-size: var(--velicina-b, clamp(420px, 50vw, 760px));
  background-repeat: var(--ponavljanje-b, repeat);
  filter: var(--filter-b, brightness(.85) saturate(.96));
  transform: var(--uvecanje-b, none);
  opacity: 0;
}
.kalkulator .kontakt__par.je-b::before { opacity: 0; }
.kalkulator .kontakt__par.je-b::after { opacity: 1; }

.kontakt__izjava--kalkulator { flex-direction: column; }
/* sans nadnaslov iznad naslova - imenuje alat; namjerno nije dugme, da ne
   vodi sa kalkulatora dok se racuna i ne takmici se sa "Zatrazi ponudu" */
.kalkulator__nadnaslov {
  margin: 0 0 clamp(14px, 1.5vw, 22px);
  font-size: var(--t-sm);
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--text-primary) 60%, transparent);
}
/* duza recenica nego na /kontakt: objasnjava sta blok radi, pa je i manja */
.kalkulator__naslov {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: var(--weight-display);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}


/* ---- polja proracuna ---- */
.racun { display: flex; flex-direction: column; }
.racun__polje { display: flex; flex-direction: column; }
.racun__oznaka {
  margin-top: clamp(14px, 1.5vw, 20px);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a89080;
}
.racun__dimenzije {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 28px);
}
/* padajuca lista izgleda kao ostala polja: samo linija ispod i strelica */
.racun__izbor {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232f2117' stroke-width='1.3'/%3E%3C/svg%3E") right 4px center / 12px 8px no-repeat;
  cursor: pointer;
  text-overflow: ellipsis;
}

.racun__rezerva {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 12px;
  align-items: start;
  margin-top: clamp(17px, 1.8vw, 25px);
  cursor: pointer;
}
.racun__rezerva input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1px solid currentColor;
  background: none;
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
.racun__rezerva input:checked {
  background: var(--base-dark-brown) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.5' fill='none' stroke='%23fff8ef' stroke-width='1.6'/%3E%3C/svg%3E") center / 11px 9px no-repeat;
}
.racun__rezerva input:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.racun__rezerva-tekst { font-family: var(--font-sans); font-size: var(--t-base); line-height: 1.3; }
.racun__rezerva-tekst small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-sm);
  color: color-mix(in srgb, var(--base-dark-brown) 55%, transparent);
}

/* ---- rezultat ---- */
.racun__rezultati {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px) clamp(16px, 2vw, 28px);
  margin: clamp(22px, 2.3vw, 31px) 0 0;
  padding-top: 0;
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
}
.racun__rezultati div { margin: 0; }
.racun__rezultati dt {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a89080;
}
.racun__rezultati dd {
  margin: 3px 0 0;
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  transition: opacity .25s var(--ease);
}
.racun__rezultati dd small { font-size: var(--t-sm); margin-left: 3px; }
.racun.je-prazan .racun__rezultati dd { opacity: .35; }

/* prazna je dok su polja prazna - da ne ostavi razmak iznad dugmeta */
.racun__napomena:empty { display: none; }
.racun__napomena {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.4;
  color: color-mix(in srgb, var(--base-dark-brown) 55%, transparent);
}
/* dugme je veza na /kontakt, a izgleda kao "Posalji poruku" na kontaktu */
a.forma__slanje { color: inherit; }
.racun.je-prazan a.forma__slanje { pointer-events: none; opacity: .45; }

@media (max-width: 767px) {
  /* dimenzije i rezultati ostaju u dvije kolone - brojevi su dovoljno sitni,
     a kartica bi u jednoj koloni bila dvaput visa */
  .racun__rezultati dt { font-size: var(--t-sm); letter-spacing: .04em; }
}
@media (max-width: 400px) {
  .racun__dimenzije { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .kontakt__par { grid-template-columns: minmax(0, 1fr); }
  .kontakt__izjava { padding-block: clamp(44px, 9vw, 72px); }
  .marquee--kontakt span { font-size: 32vw; }
}

/* ---------- STRANICA PROIZVODA ----------
   Zaglavlje po uzoru na izjavu na /o-nama: nadnaslov, ime proizvoda i uvod
   centrirani, a veliki pisani natpis prolazi iza njih preko cijele sirine.
   Traka je apsolutna pa gornji padding mora da je preskoci. */
.proizvod {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-secondary);
  color: var(--text-on-light);
  min-height: 50svh;
  padding: calc(var(--topbar-h) + clamp(32px, 4vw, 64px))
           var(--gutter)
           clamp(32px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.proizvod .eyebrow { margin-bottom: clamp(14px, 1.6vw, 24px); }
.proizvod h1 {
  font-family: var(--font-wordmark);
  font-weight: 900;
  font-size: clamp(1.75rem, 3.2vw, 3.2rem);
  line-height: .9;
  letter-spacing: -0.035em;
}
.proizvod__uvod {
  max-width: 36ch;
  margin-top: clamp(16px, 1.8vw, 28px);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.25;
}
.proizvod__najava {
  max-width: 44ch;
  margin-inline: auto;
  margin-top: clamp(26px, 3vw, 46px);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.45;
  opacity: .7;
}
.proizvod__najava a { border-bottom: 1px solid currentColor; }

/* Ilustracija ispod teksta: SVG je samo maska, boja dolazi iz background-color
   - svijetla topla braon (konjak u malo procenata), ne siva, pa se drvo
   jedva nazire ali ostaje u tonu drveta. */
.proizvod__ilustracija {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: color-mix(in srgb, var(--accent-konjak) 6%, var(--bg-secondary));
  -webkit-mask: var(--ilustracija) center / cover no-repeat;
          mask: var(--ilustracija) center / cover no-repeat;
  opacity: .5;
  pointer-events: none;
  transform-origin: 50% 60%;
  animation:
    ilustracija-ulaz 1.8s var(--ease) both,
    ilustracija-dah 22s ease-in-out 1.8s infinite alternate;
}
@keyframes ilustracija-ulaz {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: .5; transform: scale(1); }
}
@keyframes ilustracija-dah {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.06) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .proizvod__ilustracija { animation: none; }
}
.proizvod__ilustracija--drvo { --ilustracija: url("images/drvo.svg"); }
.proizvod__ilustracija--olo  { --ilustracija: url("images/olo.svg"); }

/* Tamna varijanta (parketi, lajsne, WPC decking): braon podloga i beige
   tekst, traka iznad je .topbar--tamna - isti efekat kao /o-nama. */
.proizvod--tamna {
  background: var(--bg-primary);
  color: var(--text-primary);
}
.proizvod--tamna .proizvod__ilustracija {
  background-color: color-mix(in srgb, var(--base-blush-pink) 10%, var(--bg-primary));
}

/* ---------- ARTIKLI (galerija po kategoriji) ----------
   Sve vrijednosti su iz design-system.md: bez podloga, ostre ivice,
   --col-gap izmedju kolona, .35s / --ease na prelazima. */
.artikli {
  background: var(--bg-secondary);
  color: var(--text-on-light);
  padding: 0 var(--gutter) clamp(56px, 7vw, 104px);
}

.artikli__glava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--col-gap);
  padding-block: clamp(18px, 2.2vw, 30px);
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
}
.artikli__broj {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
}

.artikli__mreza {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(26px, 3vw, 46px);
}

.artikl { margin: 0; }
.artikl__slika {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--base-dark-brown) 6%, transparent);
}
.artikl__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artikl figcaption {
  margin-top: clamp(10px, 1.1vw, 15px);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.35;
}

@media (max-width: 1023px) {
  .artikli__mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .artikli__mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- LAMINATI PO BRENDU ----------
   Navigacija sa tri proizvodjaca odmah ispod zaglavlja, pa po jedan blok
   za svakog: naslov lijevo, opis desno, ispod mreza tekstura sa puno zraka. */
.brendovi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(28px, 4vw, 64px);
  padding: clamp(18px, 2.2vw, 30px) var(--gutter);
  background: var(--bg-secondary);
  color: var(--text-on-light);
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
}
.brendovi a {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brendovi span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s ease;
}
.brendovi a:hover span { background-size: 100% 1px; }
.brendovi sup { font-size: .72em; opacity: .5; }

.artikli--brend {
  padding-top: clamp(96px, 12vw, 200px);
  padding-bottom: 0;
  scroll-margin-top: var(--topbar-h);
}
.artikli--brend:last-of-type { padding-bottom: clamp(120px, 14vw, 220px); }

.brend {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  margin-bottom: clamp(48px, 6vw, 104px);
  /* ista uvucenost kao .artikli__mreza--prozracna ispod - broj i naslov
     pocinju tacno tamo gdje i prva tekstura */
  padding-inline: clamp(0px, 4vw, 72px);
}
/* redni broj u tezkom sans pismu, kao brojke na /o-nama; "/ 03" sitno uz vrh */
.brend__redni {
  display: flex;
  align-items: flex-start;
  gap: .35em;
  margin: 0;
  font-family: var(--font-wordmark);
  font-weight: 900;
  font-size: clamp(3rem, 6.2vw, 6rem);
  line-height: .82;
  letter-spacing: -0.045em;
}
.brend__od {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: var(--w-regular);
  line-height: 1;
  letter-spacing: .08em;
  opacity: .5;
}
.brend__naslov {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--weight-display);
  line-height: 1;
  letter-spacing: -0.01em;
}
.brend__opis {
  max-width: 40ch;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.45;
}
.brend .artikli__broj { margin-top: 14px; }
@media (min-width: 1024px) {
  /* iste cetiri kolone i isti razmak kao mreza ispod: naslov nad prve dvije
     teksture, opis pocinje nad trecom */
  .brend {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(16px, 3.2vw, 56px);
    grid-template-areas: "redni redni . ." "naslov naslov tekst tekst";
    align-items: end;
  }
  .brend__redni { grid-area: redni; }
  .brend__naslov { grid-area: naslov; }
  .brend__tekst { grid-area: tekst; }
}

/* Mreza sa vise zraka: uvucena sa strane, siroki razmaci, tekstura bez okvira */
.artikli__mreza--prozracna {
  padding-inline: clamp(0px, 4vw, 72px);
  column-gap: clamp(16px, 3.2vw, 56px);
  row-gap: clamp(36px, 5vw, 88px);
}
.artikli__mreza--prozracna .artikl__slika img {
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.artikli__mreza--prozracna .artikl:hover .artikl__slika img { transform: scale(1.04); }
.artikli__mreza--prozracna figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: clamp(12px, 1.3vw, 18px);
}
.artikl__sifra {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.1;
}
.artikl__opis {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
}

/* Oznaka "Akcija" u gornjem lijevom uglu teksture. Stoji van slike koja se
   skalira (.ph img), pa ostaje mirna dok slika raste i na hover. */
.artikl__akcija {
  position: absolute;
  top: clamp(8px, .9vw, 14px);
  left: clamp(8px, .9vw, 14px);
  z-index: 1;
  padding: 6px 9px 5px;
  background: var(--base-dark-brown);
  color: var(--base-cream);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- BROJEVI ----------
   Red po red preko cijele sirine: velika serifna cifra lijevo, oznaka
   desno. Linija je border-top na svakom redu, a donja na listi, pa je
   razmak oko svake linije jednak bez obzira koliko je cifra visoka. */
/* ---------- O NAMA: BROJEVI + FOTOGRAFIJA ----------
   Tezak grotesk naslov, tanka linija, uvod, pa mreza 2x2 sa karticama i
   uspravna fotografija u trecoj koloni preko oba reda. */
.onama {
  background: var(--bg-secondary);
  color: var(--text-on-light);
  padding: clamp(56px, 7vw, 104px) var(--gutter) clamp(48px, 6vw, 92px);
}

.onama__naslov {
  font-family: var(--font-wordmark);
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 6.4rem);
  line-height: .92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.onama__glava {
  /* naslov lijevo, uvod desno uz njega, poravnati po dnu */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(32px, 5vw, 96px);
  /* linija ispod naslova, kao u referenci */
  border-bottom: 1px solid color-mix(in srgb, var(--base-dark-brown) 20%, transparent);
  padding-bottom: clamp(22px, 2.6vw, 40px);
  margin-bottom: clamp(26px, 3.2vw, 48px);
}
.onama__uvod {
  max-width: 54ch;
  padding-bottom: .35em;      /* sjedne uz osnovnu liniju naslova */
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .005em;
}
.onama__uvod b { font-weight: var(--w-medium); }

.onama__mreza {
  /* cetiri kolone, dva reda, bez razmaka - kartice se dodiruju samo
     uglovima pa se tanke linije nigdje ne udvostrucuju */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(clamp(170px, 18vw, 272px), auto);
  gap: 0;
}

.karta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(26px, 3.4vw, 54px);
  padding: clamp(16px, 1.7vw, 26px);
  border: 1px solid color-mix(in srgb, var(--base-dark-brown) 20%, transparent);
}

/* stepenice: 1. kolona gore, 2. kolona dolje, 3. kolona gore */
.karta--a { grid-column: 1; grid-row: 1; }
.karta--b { grid-column: 2; grid-row: 2; }
.karta--c { grid-column: 3; grid-row: 1; }

.karta__opis { max-width: 26ch; }
.karta__oznaka {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-base);
  line-height: 1.25;
}
.karta__dopuna {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.35;
  opacity: .55;
}

/* Cifra je dolje lijevo, plus se odvaja u desni ugao - zato space-between. */
.karta__cifra {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-family: var(--font-wordmark);
  font-weight: 900;
  font-size: clamp(3rem, 6.2vw, 6rem);
  line-height: .82;
  letter-spacing: -0.045em;
}
.karta__cifra span {
  font-size: var(--t-lg);
  font-weight: var(--w-regular);
  letter-spacing: 0;
  opacity: .45;
  padding-bottom: .35em;
}

/* Tamni blok: cetvrta kolona, prvi red - dakle ista celija mreze kao
   kartice pored njega, pa je i visina ista bez ijednog racuna. */
.karta--uvod {
  grid-column: 4;
  grid-row: 1;
  border: none;
  background: var(--base-dark-brown);
  color: var(--base-blush-pink);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.4;
}
.karta__veza {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.karta__veza i { font-style: normal; transition: transform .35s var(--ease); }
.karta--uvod:hover .karta__veza i { transform: translateX(6px); }

/* Fotografija: cetvrta kolona, drugi red - tacno pod tamnim blokom. */
.karta__foto {
  position: relative;
  grid-column: 4;
  grid-row: 2;
  overflow: hidden;
}
/* Apsolutno pozicionirana, da uvijek popuni tacno okvir - na telefonu je
   visina okvira izvedena iz aspect-ratio, gdje height:100% ne bi uhvatilo. */
.karta__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* kad se slika kropuje, neka ostane pod a ne plafon */
  object-position: center 62%;
}

/* Veza ispod mreze */
.onama__veza {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(26px, 3vw, 44px);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.onama__strelica { transition: transform .35s var(--ease); }
.onama__veza:hover .onama__strelica { transform: translateX(6px); }

/* ---------- TRADICIJA I ISKUSTVO (/o-nama) ------------------------------ */
.tradicija {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 58px);
  padding: clamp(80px, 10vw, 160px) var(--gutter-wide);
  background: var(--base-dark-brown);
  color: var(--base-blush-pink);
  text-align: center;
}
.tradicija::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/drvo.svg") center / cover no-repeat;
  opacity: .58;
}
.tradicija__sadrzaj { max-width: 700px; }
.tradicija .eyebrow {
  margin-bottom: clamp(16px, 2vw, 28px);
  color: inherit;
  opacity: .72;
}
.tradicija h2 {
  max-width: 19ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 4.2rem);
  font-weight: var(--weight-display);
  line-height: .98;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.tradicija__tekst {
  max-width: 60ch;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.5;
}
.tradicija__tekst p + p { margin-top: 1.2em; }
.tradicija__slika {
  width: clamp(170px, 22vw, 310px);
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--base-blush-pink) 48%, transparent);
  background: color-mix(in srgb, var(--base-dark-brown) 35%, transparent);
  transform: scale(.9);
  animation: tradicija-slika-rast 1.6s cubic-bezier(.22,.61,.36,1) .15s forwards;
  will-change: transform;
}
.tradicija__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes tradicija-slika-rast {
  to { transform: scale(1); }
}

@media (max-width: 767px) {
  .tradicija {
    gap: 44px;
    padding-inline: var(--gutter);
  }
  .tradicija h2 { max-width: 19ch; }
  .tradicija__slika { width: min(58vw, 280px); }
}

@media (prefers-reduced-motion: reduce) {
  .tradicija__slika { transform: none; animation: none; }
}

@media (max-width: 767px) {
  /* nema mjesta jedno uz drugo - uvod pada ispod naslova */
  .onama__glava { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .onama__uvod { padding-bottom: 0; }

  /* dvije kolone: dvije kartice gore, treca dolje lijevo, slika dolje
     desno i visa od nje - isto kao u referenci za telefon */
  .onama__mreza {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .karta--a { grid-column: 1; grid-row: 1; }
  .karta--b { grid-column: 2; grid-row: 1; }
  .karta--c { grid-column: 1; grid-row: 2; align-self: start; }
  /* tamni blok dijeli red sa karticom "6", slika pada u red ispod njega */
  .karta--uvod { grid-column: 2; grid-row: 2; }
  .karta__foto { grid-column: 2; grid-row: 3; aspect-ratio: 3 / 4; }

  .karta { min-height: clamp(150px, 42vw, 210px); gap: 20px; }
}

/* ---------- SIRENJE SLIKE + POZIV NA ASORTIMAN (/o-nama) ----------
   Okvir je 16/9 preko cijele sirine; clip-path ga na pocetku skupi na
   ~62% i sa istim procentom po obje ose, pa se odnos ne mijenja. JS
   upisuje napredak skrola u --p na sekciji. */
.siri {
  --p: 0;
  --q: calc(1 - var(--p));     /* koliko je jos zatvoreno */
  background: var(--bg-secondary);
  padding: 0 var(--gutter) clamp(56px, 6.4vw, 104px);
}

.siri__okvir {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  clip-path: inset(calc(19% * var(--q)));
  will-change: clip-path;
}

.siri__okvir img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* blagi zum unazad dok se otvara - isti potez kao na naslovnoj */
  transform: scale(calc(1 + .06 * var(--q)));
  transform-origin: center;
}

/* Kremasti veo pod tekstom: slika je svijetla i mirna, ali bez ovoga
   tamnosmedji tekst na pojedinim mjestima ne bi imao dovoljan kontrast. */
.siri__okvir::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 46%,
              color-mix(in srgb, var(--base-cream) 82%, transparent) 0%,
              color-mix(in srgb, var(--base-cream) 30%, transparent) 55%,
              transparent 78%);
  opacity: var(--p);
}

.siri__cta {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
  width: min(92%, 44ch);
  text-align: center;
  color: var(--text-on-light);
  /* pojavi se tek kad je slika skoro otvorena */
  opacity: calc((var(--p) - .72) / .2);
}

.siri__nad {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.siri__naslov {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.siri__dugme {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(4px, .8vw, 12px);
  padding: clamp(10px, 1vw, 15px) clamp(20px, 1.8vw, 30px);
  border: 1px solid currentColor;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.siri__dugme i { font-style: normal; transition: transform .35s var(--ease); }
.siri__okvir:hover .siri__dugme {
  background: var(--base-dark-brown);
  color: var(--base-blush-pink);
}
.siri__okvir:hover .siri__dugme i { transform: translateX(5px); }

@media (max-width: 767px) {
  /* na uskom ekranu 16/9 je pretanka traka za tekst - malo uspravnije,
     i natpis krece sa manje uvlacenja da se brze otvori */
  .siri__okvir {
    aspect-ratio: 5 / 4;
    clip-path: inset(calc(13% * var(--q)));
  }
  .siri__cta { gap: 10px; top: 48%; }
  .siri__naslov { font-size: var(--t-h3); }
  .siri__dugme { padding: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .siri__okvir { clip-path: none; }
  .siri__okvir img { transform: none; }
  .siri__cta { opacity: 1; }
  .siri__okvir::after { opacity: 1; }
}

/* Varijanta za naslovnu: fotografija sa centriranim pozivom na asortiman -
   isti tekst kao u .siri na /o-nama. Tanka margina okolo (--gutter, kao u
   "Prostori sa pricom"). Niza nego sama fotografija: 2:1 na desktopu, 4:3 na
   tabletu, 4:5 na telefonu (tu treba visine za tekst). */
.siri--slika { padding: var(--gutter); }
.siri--slika .siri__okvir { aspect-ratio: 2 / 1; }
/* tekst stoji u sredini slike */
.siri--slika .siri__cta { top: 50%; width: min(90%, 640px); }
.siri__proza {
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  line-height: 1.5;
  max-width: 38ch;
  text-wrap: pretty;
}

/* Okvir ovdje nije veza - hover na cijeloj slici ne smije da puni dugme,
   samo hover i fokus na samom dugmetu. */
.siri--slika .siri__okvir:hover .siri__dugme { background: none; color: inherit; }
.siri--slika .siri__okvir:hover .siri__dugme i { transform: none; }
.siri--slika .siri__okvir .siri__dugme:hover,
.siri--slika .siri__okvir .siri__dugme:focus-visible {
  background: var(--base-dark-brown);
  color: var(--base-blush-pink);
  outline: none;
}
.siri--slika .siri__okvir .siri__dugme:hover i,
.siri--slika .siri__okvir .siri__dugme:focus-visible i { transform: translateX(5px); }

/* veliki pisani natpis preko dna slike; donji dio slova prelazi ivicu i
   okvir ga odsijece, pa natpis izgleda kao da izlazi iz slike */
.marquee--slika {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
}
/* vazi za svaku .siri sliku: naslovna i /o-nama */
.siri .marquee--slika span {
  font-size: min(15vw, 30svh);
  line-height: .9;
  padding-inline: .25em;
  color: var(--base-cream);
  transform: translateY(14%);
}

@media (max-width: 1023px) {
  .siri--slika .siri__okvir { aspect-ratio: 4 / 3; }
}

@media (max-width: 767px) {
  .siri--slika .siri__okvir {
    aspect-ratio: 4 / 5;
    clip-path: inset(calc(13% * var(--q)));
  }
  .siri--slika .siri__cta { top: 50%; }
  .siri--slika .siri__proza { font-size: 15px; }
  .siri--slika .marquee--slika span { font-size: 24vw; }
  /* /o-nama: slika je na telefonu 5:4, niza - manji natpis da ne zakaci dugme */
  .siri:not(.siri--slika) .marquee--slika span { font-size: 17vw; }
}

@media (prefers-reduced-motion: reduce) {
  .siri--slika .siri__okvir { clip-path: none; }
}

/* ---------- UGRADNJA (naslovna, prije Radova) ----------
   Po skici "Obo mne", sa mnogo vazduha. Dva naslova: gore veliki pisani
   natpis "ugradnja" koji klizi preko cijele sirine (ista velicina kao
   "ponos prostora" nize na strani), a ispod njega sans naslov
   "Profesionalna ugradnja" - centriran, svaka rijec u svom redu. Zatim uska
   kolona - prednosti sa zvjezdicom kao ukrasom (zvjezdica lijevo, tekst
   uvucen), dvije uspravne fotografije 4:5 i kratak centriran tekst. Telefon:
   slike jedna pored druge (kao na skici). Od 768px desna slika krene nize,
   od 1200px slike su 320px. Fotografije krenu manje (70%) i narastu do pune
   velicine dok im sredina stigne do sredine ekrana - JS upisuje --z (0-1) na
   svaki okvir. Mjesto u rasporedu je uvijek puno, pa se tekst ispod ne
   pomjera. */
.ugradnja {
  padding: 80px 0;
  background: var(--bg-secondary);
  color: #1a1a1a;
}
/* Naslov sekcije: sans, centriran; svaka rijec je svoj red u mrezi. */
.ugradnja__naslov {
  display: grid;
  justify-items: center;
  padding-inline: 24px;
  text-align: center;
  font-family: var(--font-sans);
  margin-bottom: clamp(20px, 2.6vw, 44px);
}
/* --t-display ima dno na 2.25rem, sto je na uskom ekranu siroko skoro kao
   cijeli ekran - naslov prati sirinu, kao .radovi__glava h2 */
@media (max-width: 639px) {
  .ugradnja__naslov { font-size: clamp(1.55rem, 7.4vw, 2.4rem); }
}
.ugradnja__kolona {
  max-width: 840px;
  margin-inline: auto;
  padding-inline: 40px;
}

/* pisani natpis ispod sadrzaja, preko cijele sirine sekcije */
.marquee--ugradnja { margin-top: 32px; }
.marquee--ugradnja .marquee__track {
  width: 100%;
  justify-content: center;
  animation: ugradnja-lagano 80s ease-in-out infinite alternate;
}
@keyframes ugradnja-lagano {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-4%, 0, 0); }
}
.ugradnja .marquee--ugradnja span {
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: .95;
  padding-inline: .12em;
  /* boja/opacity dolazi od zajednickog pravila nize u fajlu */
}

.ugradnja__lista {
  display: grid;
  row-gap: 16px;
  margin-bottom: 48px;
}
.ugradnja__lista li {
  display: grid;
  /* zvjezdica stoji lijevo, tekst krece od trecine sirine - kao na skici */
  grid-template-columns: 28% minmax(0, 1fr);
  align-items: start;
}
.ugradnja__zvjezdica {
  font-family: var(--font-sans);
  font-size: 34px;
  line-height: 1;
  color: color-mix(in srgb, #a89080 70%, transparent);
  transform: translateY(.12em);
}
.ugradnja__lista p {
  max-width: 40ch;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.7;
  color: #4a4a4a;
}

.ugradnja__galerija {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.ugradnja__slika {
  /* 1 = puna velicina; bez JS-a slika je odmah puna */
  --z: 1;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #d9d5cf;           /* dok se fotografija ne ucita */
  /* 70% -> 100%, iz sredine svog mjesta */
  transform: scale(calc(.7 + .3 * var(--z)));
  will-change: transform;
}
.ugradnja__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ugradnja__tekst {
  max-width: 46ch;
  margin: 40px auto 0;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.7;
  text-align: center;
  text-wrap: balance;
  color: #4a4a4a;
}

@media (min-width: 768px) {
  .ugradnja { padding-block: 120px; }
  .ugradnja__kolona { max-width: 920px; padding-inline: 80px; }
  .marquee--ugradnja { margin-top: 40px; }
  .ugradnja .marquee--ugradnja span { font-size: min(8vw, 16svh); }
  /* pomak pocinje, sa manjim razmakom */
  .ugradnja__slika--spustena { margin-top: 32px; }
}

@media (min-width: 1200px) {
  .ugradnja { padding-block: clamp(120px, 11vw, 200px); }
  .ugradnja__lista { row-gap: 20px; margin-bottom: 56px; }
  .ugradnja__lista p { font-size: var(--t-base); }
  .ugradnja__galerija {
    grid-template-columns: repeat(2, 320px);
    gap: 32px;
    justify-content: center;
  }
  .ugradnja__slika--spustena { margin-top: 48px; }
  .ugradnja__tekst { margin-top: 48px; font-size: var(--t-base); }
}

@media (prefers-reduced-motion: reduce) {
  .ugradnja__slika { transform: none; }
}

/* ---------- SLOJEVI (/asortiman/parketi: 3D presjek daske) ----------
   Preneseno iz mqrijqm/ponos. Bez JS-a/WebGL-a sekcija je samo legenda.
   Kad slojevi.js pokrene scenu, sekcija dobije .je-3d: visoka je 320% ekrana,
   a unutra stoji zalijepljen ekran (scena gore, legenda dole). Uz smanjenu
   animaciju (.je-mirno) nema puta za scroll - jedan ekran, razdvojeno stanje.
   Scena se crta providno preko pozadine sekcije. */
.slojevi {
  position: relative;
  background: var(--bg-secondary);
  color: var(--text-on-light);
}
.slojevi.je-3d { height: 320vh; }
.slojevi.je-3d.je-mirno { height: auto; }

.slojevi__ekran {
  display: flex;
  flex-direction: column;
  padding-top: clamp(48px, 6vw, 96px);
}
.je-3d .slojevi__ekran {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  height: calc(100svh - var(--topbar-h));
  padding-top: 0;
  overflow: hidden;
}
.je-3d.je-mirno .slojevi__ekran { position: relative; }

/* min-height: 0 - bez toga se flex dijete ne steze ispod sadrzaja */
.slojevi__scena {
  display: none;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.je-3d .slojevi__scena { display: block; }
.slojevi__scena canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.slojevi__scena.je-ucitana canvas { opacity: 1; }

/* markeri: obicni HTML elementi koje slojevi.js svaki kadar pomjeri na
   ivicu sloja; krug sjedi tacno na toj tacki */
.slojevi__markeri {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}
.slojevi__marker {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.slojevi__red {
  position: absolute;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* broj u krugu: tanak braon obris, krem podloga, debelo sans pismo brojki
   sa /o-nama (--font-wordmark 900) */
.slojevi__krug {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  border: 1px solid var(--base-dark-brown);
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--base-dark-brown);
  font-family: var(--font-wordmark);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}
.slojevi__linija {
  display: block;
  background: url("/images/slojevi/markeri/marker-line.svg") 0 0 / 100% 100% no-repeat;
}
/* opis uz broj: naziv sloja pa sta je */
.slojevi__natpis { white-space: nowrap; }
/* uzak kadar: opis ispod kruga pada preko modela (tamna pluta, zrno drveta),
   pa dobija krem podlogu da ostane citljiv */
.slojevi__red.je-uspravno .slojevi__natpis {
  padding: 3px 6px 4px;
  background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
}
.slojevi__natpis b {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--base-dark-brown);
}
.slojevi__natpis small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: .78em;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--base-dark-brown);
  opacity: .7;
}

/* Kad scena radi, opisi stoje uz brojeve na modelu - legenda se ne vidi,
   ali ostaje za citace ekrana (markeri na sceni su im skriveni). */
.je-3d .slojevi__legenda {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* legenda: isti brojevi kao na modelu, uz naziv i opis sloja */
.slojevi__legenda {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 28px);
  margin: 0;
  padding: 0 var(--gutter-wide) clamp(28px, 4vh, 52px);
  list-style: none;
}
.slojevi__legenda li {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 18%, transparent);
}
.slojevi__legenda img {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  align-self: start;
}
.slojevi__legenda b {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: var(--weight-display);
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.slojevi__legenda span {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--base-dark-brown) 62%, transparent);
}

/* uspravno je pet kolona preusko - spisak ide jedan ispod drugog */
@media (max-width: 900px) {
  .slojevi__legenda {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-bottom: clamp(20px, 3vh, 32px);
  }
  .slojevi__legenda li {
    grid-template-columns: 22px auto 1fr;
    grid-template-rows: auto;
    column-gap: 12px;
    align-items: center;
    padding: 10px 0;
  }
  .slojevi__legenda img {
    grid-row: 1;
    width: 18px;
    height: 18px;
    align-self: center;
  }
  .slojevi__legenda span {
    justify-self: end;
    text-align: right;
    font-size: var(--t-sm);
  }
}

/* ---------- FOOTER ----------
   Tri pojasa odvojena tankim linijama: veze, podaci o lokacijama i red sa
   autorstvom. Linija je border-top na pojasu ispod, pa je razmak iznad i
   ispod nje uvijek isti bez obzira koliko sadrzaja ima u pojasu. */
.site-footer {
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: clamp(38px, 4.2vw, 62px) var(--gutter) 12px;
  font-size: var(--t-base);
}

.footer__veze {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 28px;
  padding-bottom: clamp(26px, 3vw, 44px);
}
.footer__veze li + li { margin-top: 9px; }
.footer__veze a {
  color: color-mix(in srgb, var(--text-primary) 62%, transparent);
  transition: color .3s var(--ease);
}
.footer__veze a:hover { color: var(--text-primary); }

/* Tanka podvlaka na hover i fokus: linija se izvuce slijeva ispod teksta.
   Crta se kao pozadina (a ne text-decoration), pa moze da se animira. */
.footer__veze a:not(.footer__ponuda),
.footer__podaci a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: color .3s var(--ease), background-size .4s var(--ease);
}
.footer__veze a:not(.footer__ponuda):hover,
.footer__veze a:not(.footer__ponuda):focus-visible,
.footer__podaci a:hover,
.footer__podaci a:focus-visible {
  background-size: 100% 1px;
  outline: none;
}

/* Minimalisticko dugme "Zatrazi ponudu" ispod kontakata: tanak svijetli
   okvir, na hover se ispuni svijetlom bojom i strelica krene gore-desno -
   isti potez kao dugme u gornjoj traci. */
.footer__veze .footer__ponuda-red { margin-top: clamp(16px, 1.6vw, 24px); }
.footer__veze .footer__ponuda {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--text-primary) 45%, transparent);
  color: var(--text-primary);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.footer__ponuda-strelica {
  flex: none;
  width: 11px;
  height: 11px;
  transition: transform .35s var(--ease);
}
.footer__veze .footer__ponuda:hover,
.footer__veze .footer__ponuda:focus-visible {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-primary);
  outline: none;
}
.footer__ponuda:hover .footer__ponuda-strelica,
.footer__ponuda:focus-visible .footer__ponuda-strelica { transform: translate(2px, -2px); }

.footer__podaci {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(28px, 3vw, 44px);
  padding-block: clamp(26px, 3vw, 44px);
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
  line-height: 1.45;
}
.footer__podaci > div { max-width: 30ch; }
.footer__podaci address { font-style: normal; }
/* adresa vodi na mjesto na Google mapama (novi tab) - samo link, bez mape */
.footer__mapa {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}
.footer__mapa span {
  font-size: var(--t-sm);
  line-height: 1.6;
  opacity: .5;
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.footer__mapa:hover span,
.footer__mapa:focus-visible span { opacity: 1; transform: translate(2px, -2px); }
.footer__podaci a:hover { color: var(--accent-pink); }
.footer__podaci i {          /* oznaka uz broj: Kancelarija, Radnja */
  font-style: normal;
  opacity: .5;
}

.footer__oznaka {
  margin-bottom: clamp(12px, 1.3vw, 18px);
  font-size: var(--t-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}

.footer__sat li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.footer__sat li + li { margin-top: 6px; }
.footer__sat b { font-weight: var(--w-regular); }

.footer__legal {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
  font-size: var(--t-sm);
  text-transform: uppercase;
}
.footer__legal .spacer { flex: 1; }
.footer__legal .pill-link {
  background: var(--base-blush-pink);
  color: var(--base-dark-brown);
  border-radius: 999px;
  padding: 7px 16px;
  text-transform: none;
}

/* =========================================================================
   BREAKPOINTI — original prelazi na 2 kolone na lg (1024px)
   ========================================================================= */
@media (min-width: 1024px) {
  .perspective { padding-block: var(--section-y); }
}

@media (max-width: 1023px) {
  /* Nav: pill lista se sklanja */
  .nav ul { display: none; }

  /* Sve u jednu kolonu */
  .grid-3 { grid-template-columns: 1fr; row-gap: 28px; }
  .span-2, .col-3 { grid-column: auto; }
  .marquee span { font-size: clamp(5rem, 26vw, 10rem); }



  .perspective { padding-block: 56px; }
  .perspective__body { margin-top: 32px; }

  .collective { padding-block: 72px; min-height: 0; }
  .collective__head { width: 100%; }

  .footer__veze,
  .footer__podaci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__legal { flex-wrap: wrap; margin-top: 40px; }
}

/* Poštuj korisnikovo podešavanje za smanjenu animaciju */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* Final editorial hero treatment */
.footer__legal .pill-link {
  position: relative;
  border: 1px solid var(--base-blush-pink);
  border-radius: 0;
}
.footer__legal .pill-link::after {
  content: "";
  position: absolute;
  inset: 7px -1px -9px 0;
  border-bottom: 1px solid var(--base-blush-pink);
  border-right: 1px solid var(--base-blush-pink);
}


/* ============================================================================
   HERO — po uzoru na naslovnu houseofhoney.com
   Gore logotip preko cijele sirine na beige podlozi i dvije male serif linije,
   ispod slike preko cijelog ekrana koje se smjenjuju brisanjem slijeva.
   Navigacije nema.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  /* fiksna traka stoji preko laminata, a sav sadrzaj zaglavlja (natpis +
     linije) ide ISPOD laminata - zato hero samo ostavi visinu trake gore */
  padding-top: var(--topbar-h);
  overflow: hidden;
  background: var(--base-blush-pink);
  color: var(--text-on-light);
}

.hero__head {
  padding: clamp(18px, 2.2vw, 34px)
           var(--gutter)
           clamp(16px, 2vw, 30px);
}

.hero__wordmark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-family: var(--font-wordmark);
  font-weight: 900;
  font-size: 8.65vw;         /* razvuceno od ivice do ivice */
  line-height: .82;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__wordmark-pisano {
  font-family: var(--font-script);
  font-weight: var(--w-regular);
  font-size: .78em;
  line-height: 1;
  letter-spacing: 0;
  text-transform: lowercase;
  margin-inline: -.04em;
  transform: translateY(.06em);
}

.hero__lines {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-top: clamp(10px, 1.1vw, 16px);
}
.hero__line {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero__line--right { text-align: right; }
.hero__line--one { display: none; }

.hero__gallery {
  position: relative;
  flex: 1 1 auto;
  min-height: 50svh;
  overflow: hidden;
  background: var(--base-blush-pink);
}

/* ---- pozadina modela: custom slika laminata preko cijele sekcije ----
   Traka krece od vrha galerije (odmah pod naslovom, ka navbaru) i ide
   dole do ~3/4 visine; ispod nje ostaje slobodan prostor u kojem stoje
   daske, natpis dekora i strelice.
   Postoje DVIJE trake jedna preko druge: pri promjeni dekora nova se
   pretapa preko stare (crossfade), pa nema treperenja. */
.hero__traka {
  position: absolute;
  inset-inline: 0;
  top: 0;
  bottom: 26%;
  z-index: 0;
  opacity: 0;
  background-repeat: repeat;
  background-size: clamp(280px, 24vw, 460px);
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--base-dark-brown) 15%, transparent);
}
.hero__traka.is-vidljiva { opacity: 1; }

/* ---- uzorci dekora: dvije kolone uz lijevu marginu ---- */
.hero__svice {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  max-height: calc(100% - 150px);
  overflow-y: auto;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__svice::-webkit-scrollbar { display: none; }
.hero__svica {
  display: block;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
  /* traka je sada preko cijele sekcije pa uzorci stoje preko drveta -
     beige podloga ih drzi kao ciste plocice, bez mijesanja dvije teksture */
  background: var(--base-blush-pink);
  cursor: pointer;
  transition: border-color .35s var(--ease);
}
/* uzorak se smanjuje na niskim ekranima da svi stanu iznad natpisa */
.hero__svica img { display: block; width: clamp(34px, 5vh, 48px); height: clamp(34px, 5vh, 48px); object-fit: cover; }
.hero__svica:hover,
.hero__svica:focus-visible,
.hero__svica.is-aktivna {
  border-color: var(--base-dark-brown);
}
.hero__svica:focus-visible { outline: none; }

/* ---- strelice: ispod trake, u slobodnom prostoru, u sredini ---- */
.hero__kontrole {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(12px, 1.4vw, 22px);
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.hero__strelica {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--base-dark-brown) 35%, transparent);
  background: none;
  color: var(--base-dark-brown);
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.hero__strelica svg { width: 16px; height: 16px; }
.hero__strelica:hover,
.hero__strelica:focus-visible {
  background: var(--base-dark-brown);
  border-color: var(--base-dark-brown);
  color: var(--base-cream);
  outline: none;
}

/* ---- model: dvije daske naslonjene jedna na drugu, u sredini sekcije ----
   Dok nemamo izolovanu fotografiju daske (transparent PNG), daska je
   tekstura laminata blago okrenuta u perspektivi (rotateY) - pa se
   suzava prema daljoj ivici - a svijetla traka uz desnu ivicu glumi
   debljinu ploce (HDF jezgro), kao na fotografiji.
   I slojeva dasaka su dva (kao i traka) - crossfade pri promjeni. */
.hero__daske {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* flex centrira par tacno po sredini ekrana, bez rucnih margina */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(96px, 13vh, 172px);
  opacity: 0;
  pointer-events: none;
  perspective: 2200px;
  perspective-origin: 50% 32%;
}
.hero__daske.is-vidljiva { opacity: 1; }

.hero__daska {
  position: relative;
  flex: 0 0 auto;
  width: clamp(104px, 7.4vw, 146px);
  height: clamp(320px, 48vh, 540px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform-origin: 50% 100%;
  /* malo kontrasta i topline: daska je izrezana iz iste teksture kao traka,
     pa bez ovoga djeluje isprano pored poda */
  filter: brightness(.98) contrast(1.06) saturate(1.05);
  box-shadow: 14px 24px 38px -18px color-mix(in srgb, var(--base-dark-brown) 42%, transparent);
}

/* debljina ploce: tanka tamna ivica lijevo, svijetlo HDF jezgro desno */
.hero__daska::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--base-dark-brown) 30%, transparent) 0 1.5%,
    transparent 1.5% 92%,
    color-mix(in srgb, var(--base-cream) 88%, #fff) 92% 96.5%,
    color-mix(in srgb, var(--base-cream) 40%, var(--base-dark-brown)) 96.5% 100%);
}

/* lijeva daska se naslanja na desnu; desna je u prvom planu i veca */
.hero__daska--a {
  margin-right: clamp(-74px, -4vw, -40px);
  transform: rotateY(-9deg) rotate(12deg);
}
.hero__daska--b {
  width: clamp(112px, 8.2vw, 160px);
  height: clamp(340px, 52vh, 580px);
  z-index: 1;
  transform: rotateY(-9deg) rotate(-11deg);
}

/* natpis dekora: uz lijevu marginu sekcije, u slobodnom prostoru ispod
   trake (containing block je .hero__gallery) */
.hero__vizual-tekst {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: clamp(12px, 1.4vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero__vizual-naziv {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--t-h3);
  line-height: 1;
  color: var(--base-dark-brown);
}
.hero__vizual-linija {
  width: 34px;
  height: 1px;
  background: var(--base-dark-brown);
}
.hero__vizual-spec {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .02em;
  color: var(--base-dark-brown);
  opacity: .65;
}

@media (prefers-reduced-motion: reduce) {
  .hero__traka,
  .hero__daske,
  .hero__vizual-tekst { transition: none; }
}

@media (max-width: 1023px) {
  .hero__head { padding-inline: 12px; }
  .hero__wordmark { font-size: 8.05vw; letter-spacing: -0.03em; }
  /* Canora na malom ekranu padne na ~25px i tanki potezi se izgube -
     malo veca i sa tankim obrisom da dobije tezinu, bez promjene karaktera. */
  .hero__wordmark-pisano {
    font-size: .92em;
    -webkit-text-stroke: .45px currentColor;
    margin-inline: -.02em;
  }
  .hero__lines { display: block; margin-top: 14px; }
  .hero__line { display: none; }
  .hero__line--one { display: block; max-width: 22ch; }
  /* hero je tacno jedan ekran, ne "najmanje" jedan: dno galerije uvijek pada
     na dno ekrana. svh = visina kad je traka sa adresom vidljiva. */
  .hero { height: 100vh; height: 100svh; min-height: 0; }
  .hero__gallery { min-height: 0; }

  /* uzorci idu u jedan red na vrhu galerije i klize bocno */
  .hero__svice {
    top: clamp(8px, 1.8vh, 18px);
    left: var(--gutter);
    right: var(--gutter);
    transform: none;
    display: flex;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .hero__svica { flex: 0 0 auto; padding: 4px; }
  .hero__svica img { width: 40px; height: 40px; }
  .hero__strelica { width: 34px; height: 34px; }
  .hero__strelica svg { width: 14px; height: 14px; }
  /* traka je i na telefonu preko cijele sirine, samo niza */
  .hero__traka { bottom: 32%; background-size: clamp(200px, 52vw, 340px); }
  /* daske ostaju u sredini ekrana, samo manje - i malo vise podignute
     da strelice i natpis imaju svoj prostor dole */
  .hero__daske { padding-bottom: clamp(84px, 11vh, 132px); }
  .hero__daska {
    width: clamp(72px, 21vw, 100px);
    height: clamp(230px, 40vh, 350px);
  }
  .hero__daska--a { margin-right: -34px; }
  .hero__daska--b { width: clamp(78px, 23vw, 108px); height: clamp(250px, 44vh, 390px); }
  .hero__vizual-naziv { font-size: var(--t-lg); }
  .hero__kontrole { bottom: clamp(14px, 2.2vw, 26px); }
}



/* ============================================================================
   NAVBAR
   Desktop: mali logotip u cosku + nazivi sekcija.
   Mobilni: znak lijevo, tri crte desno, panel se spusta ispod trake.
   Traka je fixed i ima svoju podlogu (beige, ili braon na stranicama koje
   pocinju tamno), pa tekst ostaje citljiv preko svih sekcija.
   ========================================================================== */
.topbar {
  position: fixed;
  top: 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid color-mix(in srgb, var(--base-dark-brown) 12%, transparent);
  inset-inline: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 52px);
  height: var(--topbar-h);
  padding-inline: var(--gutter);
  color: var(--text-on-light);
}

/* Stranica koja pocinje tamnom sekcijom: traka mora biti svijetla, inace
   tamnosmedji tekst i logotip nestanu na tamnosmedjoj podlozi. Padajuci
   panel i mobilni meni imaju svoje svijetle podloge, pa im tekst ostaje taman. */
.topbar--tamna {
  color: var(--text-primary);
  background: var(--bg-primary);
  border-bottom-color: color-mix(in srgb, var(--base-blush-pink) 12%, transparent);
}
/* padajuci meni i mobilni panel prate traku: braon podloga, beige tekst */
.topbar--tamna .megameni,
.topbar--tamna .topbar__panel {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-bottom-color: color-mix(in srgb, var(--base-blush-pink) 16%, transparent);
}
.topbar--tamna .megameni__mreza a { border-top-color: color-mix(in srgb, var(--base-blush-pink) 22%, transparent); }
.topbar--tamna .megameni__mreza a:hover { border-top-color: currentColor; }

.topbar__znak { display: none; }
.topbar__znak img { display: block; width: 26px; height: auto; }

.topbar__logo img {
  display: block;
  /* sirina je vezana za odnos crteza (3.42:1) tako da logotip u traci
     ostane visok oko 33px - isto kao ranije */
  width: clamp(84px, 7.6vw, 112px);
  height: auto;
}

.topbar__nav { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 32px); }
.topbar__nav a,
.topbar__okidac,
.topbar__panel a {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .01em;
  line-height: 1;
}
.topbar__nav a,
.topbar__nav .topbar__okidac {
  padding-block: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease);
}
.topbar__nav a:hover,
.topbar__nav .topbar__okidac:hover { border-bottom-color: currentColor; }

/* stranica na kojoj se trenutno nalazimo */
.topbar__nav a[aria-current="page"] { border-bottom-color: currentColor; }
.topbar__panel a[aria-current="page"] { opacity: .55; }

/* ---- okidac za Asortiman ---- */
.topbar__okidac {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-inline: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.topbar__strelica {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .35s var(--ease);
}
.topbar__okidac[aria-expanded="true"] .topbar__strelica {
  transform: translateY(1px) rotate(-135deg);
}

/* ---- panel preko cijele sirine ----
   Zatvoren se skuplja uz gornju ivicu (clip-path) i gasi kroz visibility,
   sto ga izbacuje i iz reda za tab. display:none se ne moze animirati. */
.megameni {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 1;
  padding: clamp(22px, 2.6vw, 40px) var(--gutter) clamp(26px, 3vw, 48px);
  /* ista bez boja kao traka iznad - panel se cita kao njen nastavak */
  background: var(--bg-secondary);
  color: var(--text-on-light);
  border-bottom: 1px solid color-mix(in srgb, var(--base-dark-brown) 16%, transparent);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .55s var(--ease), visibility 0s .55s;
}
.megameni.je-otvoren {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path .55s var(--ease), visibility 0s;
}

.megameni__mreza {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--col-gap);
  /* --pocetak mjeri skripta: razmak od lijeve ivice panela do rijeci
     Asortiman u traci, da mreza krene tacno ispod nje */
  margin-left: var(--pocetak, 0px);
}
.megameni__mreza a {
  display: flex;
  align-items: baseline;
  gap: clamp(28px, 2.6vw, 48px);
  padding-block: clamp(11px, 1.1vw, 17px);
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 20%, transparent);
  line-height: 1;
  text-transform: uppercase;
  transition: border-color .35s var(--ease);
}
.megameni__mreza a:hover { border-top-color: currentColor; }

/* broj vodi, naziv je sitniji - obrnuto od uobicajenog, pa mreza dobija ritam */
/* broj je isti sans kao naziv, deblji (medium - pravi rez, ne lazni bold),
   sa dosta vazduha prema nazivu */
.megameni__broj {
  min-width: 2ch;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  line-height: 1.3;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  opacity: .6;
}
.megameni__ime {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  letter-spacing: .02em;
  transition: transform .4s var(--ease);
}
.megameni__mreza a:hover .megameni__ime { transform: translateX(6px); }

.megameni__strelica {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .35s var(--ease), transform .4s var(--ease);
}
.megameni__mreza a:hover .megameni__strelica {
  opacity: .7;
  transform: none;
}

/* stavke ulaze jedna za drugom kad se panel otvori */
.megameni__mreza li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.megameni.je-otvoren .megameni__mreza li { opacity: 1; transform: none; }
.megameni.je-otvoren .megameni__mreza li:nth-child(1) { transition-delay: .16s; }
.megameni.je-otvoren .megameni__mreza li:nth-child(2) { transition-delay: .21s; }
.megameni.je-otvoren .megameni__mreza li:nth-child(3) { transition-delay: .26s; }
.megameni.je-otvoren .megameni__mreza li:nth-child(4) { transition-delay: .20s; }
.megameni.je-otvoren .megameni__mreza li:nth-child(5) { transition-delay: .25s; }
.megameni.je-otvoren .megameni__mreza li:nth-child(6) { transition-delay: .30s; }

/* ---- mobilna podlista ----
   grid-template-rows 0fr -> 1fr je jedini nacin da se visina animira
   a da se ne pogadja fiksni max-height. */
.podmeni {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.podmeni.je-otvoren { grid-template-rows: 1fr; }
.podmeni__lista { overflow: hidden; }
.podmeni__lista a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 9px;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1;
  text-transform: uppercase;
}
.podmeni__lista .megameni__strelica { display: none; }

@media (max-width: 1023px) {
  .megameni { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .megameni,
  .megameni__mreza li,
  .megameni__ime,
  .megameni__strelica,
  .podmeni,
  .topbar__strelica { transition: none; }
}

.topbar__meni {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 14px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.topbar__meni span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.topbar__meni[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar__meni[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar__meni[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.topbar__panel {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 18px var(--gutter) 22px;
  background: var(--base-blush-pink);
}
.topbar__panel[hidden] { display: none; }

/* ---- CTA u navbaru -------------------------------------------------------
   Pravougaonik bez ispune, samo smedji stroke, i linija ispod njega iste
   duzine kao duza stranica pravougaonika. Na mobilnom se svede na kvadrat
   sa malom strelicom. Linija je ::after na <a>, koji ima padding-bottom,
   pa se cijela grupa (okvir + linija) centrira u traci kao jedna cjelina. */
.cta {
  position: relative;
  margin-left: auto;
  display: inline-block;
  padding-bottom: 4px;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.cta__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(24px, 1.85vw, 28px);
  padding-inline: clamp(10px, 1vw, 15px);
  border: 1px solid currentColor;
  overflow: hidden;
}

/* ispuna naraste odozdo na hover */
.cta__box::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: currentColor;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .45s var(--ease);
}
.cta:hover .cta__box::before,
.cta:focus-visible .cta__box::before { transform: scaleY(1); }

/* linija ispod okvira — ista sirina kao okvir */
.cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
}

.cta__tekst,
.cta__strelica { position: relative; }

.cta__tekst {
  font-family: var(--font-sans);
  font-size: clamp(.7rem, .9vw, .85rem);
  letter-spacing: .015em;
  line-height: 1;
  white-space: nowrap;
  transition: color .35s var(--ease);
}
.cta:hover .cta__tekst,
.cta:focus-visible .cta__tekst { color: var(--base-cream); }

.cta__strelica {
  display: none;
  width: 12px;
  height: 12px;
  transition: color .35s var(--ease), transform .35s var(--ease);
}

.cta:focus-visible { outline: none; }
.cta:focus-visible .cta__box { outline: 1px solid currentColor; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cta__box::before { transition: none; }
}

/* Korpa: krug sa tankim obrisom i ikonicom korpe, desno od "Zatrazi ponudu".
   Sajt jos nema korpu - zasad vodi na kalkulator na naslovnoj. */
.korpa {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.korpa svg { width: 16px; height: 16px; }
.korpa:hover,
.korpa:focus-visible {
  background: var(--base-dark-brown);
  color: var(--base-cream);
  outline: none;
}
/* na tamnoj traci obrnuto - braon krug bi nestao na braon podlozi */
.topbar--tamna .korpa:hover,
.topbar--tamna .korpa:focus-visible {
  background: var(--base-cream);
  color: var(--base-dark-brown);
}


@media (max-width: 1023px) {
  /* znak iste velicine kao kvadrat sa strelicom (30px), a donji razmak
     odgovara liniji ispod kvadrata - tako im se ivice poklapaju */
  .topbar__znak { display: block; margin-bottom: 4px; }
  .topbar__znak img { width: 30px; height: 30px; object-fit: contain; }
  .topbar__logo,
  .topbar__nav { display: none; }
  .topbar__meni { display: flex; }
  .topbar__panel:not([hidden]) { display: flex; }

  /* okvir postaje kvadrat, tekst ustupa mjesto strelici;
     samo .cta gura udesno, meni ga prati (inace bi dva auto-margina
     podijelila prazan prostor i kvadrat bi zavrsio na sredini trake) */
  .topbar__meni { margin-left: 0; }
  .cta { padding-bottom: 4px; }
  .cta__box { width: 30px; height: 30px; padding-inline: 0; }
  /* korpa iste velicine kao kvadrat pored; donji razmak = linija ispod kvadrata */
  .korpa { width: 30px; height: 30px; margin-bottom: 4px; }
  .korpa svg { width: 15px; height: 15px; }
  .cta__tekst { display: none; }
  .cta__strelica { display: block; }
  .cta:hover .cta__strelica,
  .cta:focus-visible .cta__strelica {
    color: var(--base-cream);
    transform: translate(1px, -1px);
  }
}

/* ============================================================================
   IZJAVA — sekcija odmah ispod heroa, po uzoru na naslovnu houseofhoney.com
   Mjereno na njihovoj stranici na 1440px:
     nadnaslov  17.7px neueHaasGrotesk, uppercase
     iskaz      44.9px noeText, line-height 1, letter-spacing -0.02em, uppercase
     pisano     537px canora (37.3vw), prolazi iza teksta i klizi
   ========================================================================== */
.izjava {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  padding: clamp(72px, 7.8vw, 113px) var(--gutter-wide) var(--section-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.izjava__glava { width: 70%; }
.izjava .eyebrow { margin-bottom: 22px; }
.izjava h2 { letter-spacing: -0.01em; }

/* pisana rijec ide preko cijele sirine, iza teksta */
.izjava .marquee {
  position: absolute;
  inset-inline: 0;
  top: 59%;
  transform: translateY(-50%);
  z-index: -1;
}
.marquee--veliki span {
  /* Vezano i za visinu prozora - na sirokom a niskom ekranu bi samo vw
     naraslo preko cijelog iskaza. */
  font-size: min(33vw, 62svh);
  line-height: .9;
  /* .izjava (i na naslovnoj #ko-smo i na /o-nama) ima TAMNU (braon) pozadinu
     - opste pravilo .marquee span je za svijetle pozadine i ovdje bi bio
     skoro nevidljiv (taman na tamnom). Ostaje krem/bijel, bez opacity. */
  color: var(--base-cream) !important;
  opacity: .5;
}

/* Blok teksta ispod pisane rijeci na naslovnoj. Naslov i ovaj tekst su
   iste serifne velicine - otud override na #ko-smo, da zaglavlje na
   /o-nama zadrzi svoj veci naslov. */
.izjava__proza {
  display: flex;
  flex-direction: column;
  gap: .75em;
  max-width: 46ch;
  line-height: 1.28;
}
#ko-smo h2,
#ko-smo .izjava__proza { font-size: var(--t-h3); }
/* cetiri reda sans verzala na ovoj velicini "vicu" - tekst ide malim slovima */
#ko-smo .izjava__proza { text-transform: none; letter-spacing: -0.01em; }

/* Sekcija se ne razvlaci na visinu ekrana - visina ide po sadrzaju, a
   pisana rijec stoji u toku teksta i negativnom marginom se uvlaci pod
   naslov i tekst (z-index -1 je drzi iza njih), kao zaglavlje na /o-nama. */
#ko-smo {
  min-height: 0;
  justify-content: flex-start;
  /* Više prostora nakon hero-a i prije naredne sekcije. */
  padding-block: clamp(140px, 12vw, 220px);
}
#ko-smo .marquee {
  position: static;
  transform: none;
  z-index: -1;
  width: 100vw;                        /* preko cijele sirine, i van paddinga */
  /* tek toliko uvuceno da naslov sjedne na gornje petlje slova, a da
     ostane citljiv - ne preko cijele rijeci */
  margin-top: clamp(-26px, -1.6vw, -8px);
  margin-bottom: clamp(-54px, -3.8vw, -22px);
}
#ko-smo .marquee--veliki span { font-size: min(18vw, 30svh); padding-inline: .3em; }
#ko-smo .izjava__foot { margin-top: 0; padding-top: clamp(26px, 3vw, 52px); }

@media (max-width: 767px) {
  /* na telefonu natpis ne ide pod tekst - nema sirine da se sakrije */
  #ko-smo .marquee {
    z-index: auto;
    margin-block: clamp(8px, 3vw, 22px);
  }
  #ko-smo .marquee--veliki span { font-size: 34vw; }
}

/* /o-nama: ista logika kao #ko-smo - sekcija ide po sadrzaju, ne
   preko cijelog ekrana, a pisana rijec "MT Ponos" se uvlaci u tok teksta
   (negativna margina) da stoji blizu naslova iznad i teksta ispod, umjesto
   da lebdi na 59% jedne 100svh sekcije sa dosta praznog prostora. */
#o-nama {
  min-height: 0;
  justify-content: flex-start;
  padding-block: clamp(100px, 10vw, 160px);
}
#o-nama .marquee {
  position: static;
  transform: none;
  z-index: -1;
  width: 100vw;
  margin-top: clamp(-22px, -1.6vw, -10px);
  margin-bottom: clamp(-46px, -3.4vw, -20px);
}
#o-nama .izjava__foot { margin-top: 0; padding-top: clamp(22px, 2.6vw, 44px); }

@media (max-width: 767px) {
  #o-nama .marquee { margin-block: clamp(8px, 3vw, 22px); }
}

.izjava__foot {
  margin-top: auto;
  padding-top: clamp(40px, 6vw, 90px);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .izjava { padding-inline: 24px; min-height: 92svh; }
  .izjava__glava { width: 100%; }
  .izjava .marquee { top: 58%; }
  .marquee--veliki span { font-size: min(52vw, 34svh); }
}

/* =========================================================================
   PRODAVNICA: katalog (pretraga i filteri), kartice, stranica artikla, korpa
   Sve iz postojecih tokena: ostre ivice, tanke linije kroz color-mix,
   sans verzal za oznake, .35s var(--ease) na prelazima.
   ========================================================================= */
[hidden] { display: none !important; }

/* ---------- KATALOG: traka iznad artikala ----------
   Lijepi se odmah ispod navigacije (traka sajta je fixed). */
.katalog {
  position: sticky;
  top: var(--topbar-h);
  z-index: 6;
  padding-inline: var(--gutter);
  background: var(--bg-secondary);
  color: var(--text-on-light);
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
}
.katalog__traka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(10px, 1.6vw, 24px);
  padding-block: 10px;
}
.katalog__pretraga {
  flex: 1 1 260px;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding-inline: 12px;
  border: 1px solid color-mix(in srgb, var(--base-dark-brown) 18%, transparent);
  transition: border-color .35s var(--ease);
}
.katalog__pretraga:focus-within { border-color: var(--base-dark-brown); }
.katalog__pretraga svg { flex: none; width: 15px; height: 15px; opacity: .6; }
.katalog__pretraga input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  outline: none;
}
.katalog__pretraga input::placeholder { color: color-mix(in srgb, var(--base-dark-brown) 50%, transparent); }

.katalog__dugme,
.katalog__sort select {
  height: 42px;
  padding-inline: 14px;
  border: 1px solid color-mix(in srgb, var(--base-dark-brown) 18%, transparent);
  background: none;
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.katalog__dugme { display: inline-flex; align-items: center; gap: 6px; }
.katalog__dugme sup { font-size: .75em; }
.katalog__dugme:hover { border-color: var(--base-dark-brown); }
.katalog__dugme[aria-expanded="true"] {
  background: var(--base-dark-brown);
  border-color: var(--base-dark-brown);
  color: var(--base-cream);
}
.katalog__sort { display: inline-flex; align-items: center; gap: 10px; }
.katalog__sort > span {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a89080;
}
.katalog__sort select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232f2117' stroke-width='1.3'/%3E%3C/svg%3E") right 12px center / 11px 7px no-repeat;
}
.katalog__sort select:hover,
.katalog__sort select:focus { border-color: var(--base-dark-brown); outline: none; }
.katalog__broj {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
  white-space: nowrap;
}

.katalog__filteri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px clamp(20px, 3vw, 48px);
  max-height: min(60svh, 520px);
  overflow-y: auto;
  padding: 16px 0 20px;
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 14%, transparent);
}
.katalog__grupa { min-width: 0; margin: 0; padding: 0; border: 0; }
@media (min-width: 900px) {
  .katalog__grupa--siroka { grid-column: span 2; }
}
.katalog__grupa legend {
  margin-bottom: 10px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a89080;
}
.katalog__cipovi { display: flex; flex-wrap: wrap; gap: 6px; }
.cip { position: relative; cursor: pointer; }
.cip input { position: absolute; opacity: 0; pointer-events: none; }
.cip span {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  padding: 7px 11px 6px;
  border: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.1;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.cip sup { font-size: .7em; opacity: .55; }
.cip:hover span { border-color: var(--base-dark-brown); }
.cip input:checked + span {
  background: var(--base-dark-brown);
  border-color: var(--base-dark-brown);
  color: var(--base-cream);
}
.cip input:focus-visible + span { outline: 1px solid var(--base-dark-brown); outline-offset: 2px; }

/* red kategorija (laminati: brend, lajsne: materijal) - uvijek vidljiv */
.katalog__kategorije {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0 0 12px;
  border: 0;
}
.cip--sve { padding: 0; border: 0; background: none; color: inherit; }
.cip--sve:focus-visible { outline: none; }
.cip--sve:focus-visible span { outline: 1px solid var(--base-dark-brown); outline-offset: 2px; }
/* "Sve" je aktivno dok nijedna kategorija nije izabrana */
.katalog__kategorije:not(:has(input:checked)) .cip--sve span {
  background: var(--base-dark-brown);
  border-color: var(--base-dark-brown);
  color: var(--base-cream);
}
.katalog__ponisti-red { grid-column: 1 / -1; }
.katalog__ponisti {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.katalog__prazno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: clamp(72px, 10vw, 160px) var(--gutter);
  background: var(--bg-secondary);
  color: var(--text-on-light);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  text-align: center;
}
/* brend na koji vodi sidro ne smije da zavrsi ispod zalijepljene trake */
.artikli--brend { scroll-margin-top: calc(var(--topbar-h) + 64px); }
.artikli--jedna { padding-top: clamp(40px, 5vw, 80px); }

@media (max-width: 639px) {
  .katalog__pretraga { flex-basis: 100%; max-width: none; }
  .katalog__sort > span { display: none; }
  .katalog__dugme,
  .katalog__sort select { height: 38px; }
  .katalog__filteri { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- KARTICA ARTIKLA (link + brzo dodavanje) ---------- */
.artikl { position: relative; }
.artikl__veza { display: block; color: inherit; }
.artikl__veza:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.artikl__natpis {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: clamp(12px, 1.3vw, 18px);
}
.artikl__veza:hover .artikl__sifra { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.artikli__mreza--prozracna .artikl__veza:hover .artikl__slika img { transform: scale(1.04); }

/* WPC slike nisu cista tekstura nego daska na bijelom - kvadrat iste
   velicine kao teksture, sa tankim braon okvirom */
.artikl__slika--okvir,
.artikal__slika--okvir {
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-konjak) 75%, transparent);
}
.artikl__slika--okvir img,
.artikal__slika--okvir img { mix-blend-mode: multiply; }

.artikl__brzo {
  position: absolute;
  top: clamp(8px, .9vw, 14px);
  right: clamp(8px, .9vw, 14px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
  background: var(--base-cream);
  color: var(--base-dark-brown);
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  line-height: 1;
  cursor: pointer;
  transition: opacity .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.artikl__brzo:hover,
.artikl__brzo:focus-visible {
  background: var(--base-dark-brown);
  color: var(--base-cream);
  outline: none;
}
@media (hover: hover) {
  .artikl__brzo { opacity: 0; }
  .artikl:hover .artikl__brzo,
  .artikl__brzo:focus-visible { opacity: 1; }
}

/* ---------- PARKETI: tekst iznad i ispod 3D presjeka ---------- */
.artikli--tekst { padding-bottom: clamp(56px, 7vw, 112px); }
.artikli--tekst .brend { margin-bottom: 0; }
.brend__tekst .brend__opis + .brend__opis { margin-top: 1em; }
.brend__lista { margin: 0; row-gap: 10px; }
.brend__lista li { grid-template-columns: 28px minmax(0, 1fr); }
.brend__lista p { font-size: var(--t-base); line-height: 1.45; color: inherit; }

/* ---------- NEDOSTUPNO (/vizualizator) ---------- */
.nedostupno {
  min-height: 80svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: calc(var(--topbar-h) + 48px) var(--gutter) 96px;
  background: var(--bg-secondary);
  color: var(--text-on-light);
  text-align: center;
}
.nedostupno__naslov {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: var(--w-regular);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: none;
}
.nedostupno__tekst { font-family: var(--font-sans); font-size: var(--t-base); opacity: .8; }

/* ---------- STRANICA ARTIKLA ---------- */
.artikal-stranica {
  background: var(--bg-secondary);
  color: var(--text-on-light);
  padding-top: calc(var(--topbar-h) + clamp(14px, 2vw, 32px));
}
.mrvice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 0 var(--gutter) clamp(12px, 1.4vw, 20px);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mrvice a { opacity: .55; transition: opacity .35s var(--ease); }
.mrvice a:hover { opacity: 1; }
.mrvice span[aria-hidden] { opacity: .35; }

.artikal { display: grid; grid-template-columns: minmax(0, 1fr); }

.artikal__trake {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.artikal__trake::-webkit-scrollbar { display: none; }
.artikal__slika {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  scroll-snap-align: start;
  background: color-mix(in srgb, var(--base-dark-brown) 6%, transparent);
}
.artikal__slika img { width: 100%; height: 100%; object-fit: cover; }
.artikal__tacke { display: flex; justify-content: center; gap: 8px; padding-top: 14px; }
.artikal__tacke button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid var(--base-dark-brown);
  background: none;
  cursor: pointer;
}
.artikal__tacke button[aria-current="true"] { background: var(--base-dark-brown); }

.artikal__info { padding: clamp(22px, 3vw, 36px) clamp(16px, 4vw, 24px) clamp(48px, 6vw, 104px); }
.artikal__nadnaslov { font-size: var(--t-sm); letter-spacing: .06em; opacity: .7; }
.artikal__naslov {
  margin: 10px 0 8px;
  font-size: var(--t-h2);
  line-height: 1;
}
.artikal__podnaslov,
.artikal__oznaka {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a89080;
}
.artikal__cijena {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(18px, 2vw, 28px);
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  font-weight: var(--w-medium);
}
.artikal__cijena .artikl__akcija { position: static; }

.artikal__brzo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(18px, 2vw, 26px) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 20%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--base-dark-brown) 20%, transparent);
}
.artikal__brzo div { padding: 12px 0; }
.artikal__brzo div + div {
  padding-left: 16px;
  border-left: 1px solid color-mix(in srgb, var(--base-dark-brown) 20%, transparent);
}
.artikal__brzo dt {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a89080;
}
.artikal__brzo dd { margin: 3px 0 0; font-family: var(--font-sans); font-size: var(--t-base); }

.artikal__dekori { margin-top: clamp(20px, 2.2vw, 30px); }
.artikal__oznaka b { margin-left: 6px; font-weight: var(--w-medium); color: var(--text-on-light); }
.artikal__oznaka span { margin-left: 10px; opacity: .8; }
.artikal__dekori ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.artikal__dekori a {
  display: block;
  width: 52px;
  height: 52px;
  padding: 2px;
  border: 1px solid transparent;
  transition: border-color .35s var(--ease);
}
.artikal__dekori a:hover { border-color: color-mix(in srgb, var(--base-dark-brown) 35%, transparent); }
.artikal__dekori a[aria-current="page"] { border-color: var(--base-dark-brown); }
.artikal__dekori img { width: 100%; height: 100%; object-fit: cover; }

.artikal__kupi { margin-top: clamp(22px, 2.4vw, 32px); }
.artikal__racun { display: grid; gap: 4px; margin-bottom: 14px; }
.artikal__racun .forma__polje {
  margin-top: 6px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--base-dark-brown) 18%, transparent);
}
.artikal__racun .forma__polje:focus { border-color: var(--base-dark-brown); }
.artikal__racun .forma__polje[aria-invalid="true"] { border-color: color-mix(in srgb, var(--base-dark-brown) 45%, transparent); }
.artikal__racun .racun__rezerva { margin-top: 10px; }
.artikal__racun .racun__rezerva-tekst { font-size: var(--t-sm); }
.artikal__racun .racun__rezerva-tekst small { display: block; font-size: var(--t-sm); opacity: .6; }

.artikal__red { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.stepper {
  display: grid;
  grid-template-columns: 40px 46px 40px;
  height: 50px;
  border: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
  background: var(--bg-secondary);
}
.stepper button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  cursor: pointer;
  transition: background-color .35s var(--ease);
}
.stepper button:hover { background: color-mix(in srgb, var(--base-dark-brown) 8%, transparent); }
.stepper input,
.stepper output {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
}
.artikal__dodaj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 50px;
  padding-inline: 20px;
  border: 1px solid var(--base-dark-brown);
  background: var(--base-dark-brown);
  color: var(--base-cream);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.artikal__dodaj span:last-child { transition: transform .35s var(--ease); }
.artikal__dodaj:hover,
.artikal__dodaj:focus-visible { background: var(--base-cream); color: var(--base-dark-brown); outline: none; }
.artikal__dodaj:hover span:last-child { transform: translateX(4px); }
.artikal__ukupno {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  opacity: .65;
}

.artikal__upit,
.artikli__sve {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.artikal__upit { margin-top: clamp(16px, 1.8vw, 24px); padding-bottom: 2px; border-bottom: 1px solid currentColor; }
.artikal__upit i,
.artikli__sve i { font-style: normal; transition: transform .35s var(--ease); }
.artikal__upit:hover i,
.artikli__sve:hover i { transform: translateX(6px); }

.artikal__uz {
  display: grid;
  gap: 8px;
  margin-top: clamp(20px, 2.2vw, 30px);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.35;
}
.artikal__uz li { display: grid; grid-template-columns: 18px minmax(0, 1fr); }
.artikal__uz span[aria-hidden] { color: #a89080; }
.artikal__uz a { border-bottom: 1px solid color-mix(in srgb, var(--base-dark-brown) 35%, transparent); }

.artikal__harmonika {
  margin-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 20%, transparent);
}
.artikal__harmonika details { border-bottom: 1px solid color-mix(in srgb, var(--base-dark-brown) 20%, transparent); }
.artikal__harmonika summary {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 28px 17px 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.artikal__harmonika summary::-webkit-details-marker { display: none; }
/* plus koji postaje minus */
.artikal__harmonika summary::before,
.artikal__harmonika summary::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 13px;
  height: 1px;
  background: currentColor;
  transition: transform .35s var(--ease);
}
.artikal__harmonika summary::after { transform: rotate(90deg); }
.artikal__harmonika details[open] summary::after { transform: rotate(0deg); }
.artikal__harmonika summary:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.artikal__sadrzaj {
  display: grid;
  gap: 1em;
  padding-bottom: 20px;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.5;
}
.artikal__sadrzaj p { max-width: 60ch; }
.artikal__prednosti { display: grid; gap: 6px; }
.artikal__prednosti li { position: relative; padding-left: 18px; font-size: var(--t-sm); }
.artikal__prednosti li::before { content: "*"; position: absolute; left: 0; color: #a89080; }
.artikal__spec { margin: 0; }
.artikal__spec div {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 12%, transparent);
  font-size: var(--t-sm);
}
.artikal__spec div:first-child { border-top: 0; }
.artikal__spec dt { opacity: .6; }
.artikal__spec dd { margin: 0; }

.artikli--slicni { padding-bottom: clamp(64px, 8vw, 128px); }
.artikli--slicni .artikli__glava h2 { font-size: var(--t-base); font-weight: var(--w-regular); letter-spacing: .01em; }

@media (max-width: 1023px) {
  /* na telefonu kolicina i dugme ostaju pri dnu ekrana dok se cita opis */
  .artikal__red {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-inline: calc(-1 * clamp(16px, 4vw, 24px));
    padding: 10px clamp(16px, 4vw, 24px);
    background: var(--bg-secondary);
    border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 20%, transparent);
  }
}
/* natpis koji ide uz ivicu slike - samo na desktopu */
.artikal__vertikalno { display: none; }
@media (min-width: 1024px) {
  .artikal {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, .9fr);
    column-gap: clamp(28px, 3vw, 56px);
    padding: clamp(24px, 3vw, 56px) var(--gutter) 0;
  }
  .artikal__vertikalno {
    position: sticky;
    top: calc(var(--topbar-h) + 32px);
    align-self: start;
    display: flex;
    gap: 28px;
    margin: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a89080;
    white-space: nowrap;
  }
  .artikal__vertikalno span + span::before { content: "—"; margin-bottom: 28px; display: inline-block; opacity: .6; }
  /* na desktopu slike stoje jedna ispod druge, bez klizanja */
  .artikal__trake { display: grid; gap: var(--gutter); overflow: visible; }
  .artikal__tacke { display: none; }
  .artikal__info {
    max-width: 500px;
    margin-left: clamp(24px, 4vw, 88px);
    padding: clamp(8px, 1.5vw, 24px) 0 clamp(80px, 8vw, 140px);
  }
  .artikal__naslov { margin: 18px 0 14px; }
  .artikal__cijena { margin-top: clamp(32px, 3.2vw, 52px); }
  .artikal__brzo { margin-top: clamp(28px, 2.8vw, 44px); }
  .artikal__brzo div { padding: 18px 0; }
  .artikal__dekori { margin-top: clamp(36px, 3.4vw, 56px); }
  .artikal__kupi { margin-top: clamp(40px, 3.8vw, 64px); }
  .artikal__upit { margin-top: clamp(28px, 2.6vw, 40px); }
  .artikal__harmonika { margin-top: clamp(48px, 4.6vw, 80px); }
}

/* ---------- KORPA ---------- */
.korpa { position: relative; }
.korpa__broj {
  position: absolute;
  top: -5px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--base-dark-brown);
  color: var(--base-cream);
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.topbar--tamna .korpa__broj { background: var(--base-cream); color: var(--base-dark-brown); }

.korpa-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(460px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
  background: var(--base-cream);
  color: var(--text-on-light);
  font-family: var(--font-sans);
}
.korpa-panel[open] { display: flex; flex-direction: column; animation: korpa-ulaz .5s var(--ease); }
.korpa-panel::backdrop { background: color-mix(in srgb, var(--base-dark-brown) 45%, transparent); }
@keyframes korpa-ulaz { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .korpa-panel[open] { animation: none; } }

.korpa-panel__glava {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--base-dark-brown) 18%, transparent);
}
.korpa-panel__glava sup { font-size: .7em; opacity: .6; }
.korpa-panel__zatvori,
.korpa-panel__isprazni,
.korpa-stavka__ukloni {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.korpa-panel__poruka {
  padding: 10px 22px;
  background: color-mix(in srgb, var(--base-dark-brown) 7%, transparent);
  font-size: var(--t-sm);
}
.korpa-panel__poruka:empty { display: none; }
.korpa-panel__lista { flex: 1; overflow-y: auto; padding: 0 22px; }
.korpa-stavka {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--base-dark-brown) 14%, transparent);
}
.korpa-stavka img { width: 72px; height: 72px; object-fit: cover; }
.korpa-stavka__tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.korpa-stavka__naziv { font-size: var(--t-base); line-height: 1.2; }
.korpa-stavka__naziv:hover { text-decoration: underline; text-underline-offset: 3px; }
.korpa-stavka__opis { font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase; color: #a89080; }
.korpa-stavka__kol { font-size: var(--t-sm); font-variant-numeric: tabular-nums; opacity: .7; }
.korpa-stavka__red { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stepper--malo { grid-template-columns: 32px 38px 32px; height: 34px; }
.stepper--malo button { font-size: var(--t-base); }

.korpa-panel__prazno { display: grid; justify-items: start; gap: 18px; padding: 32px 22px; font-size: var(--t-base); }
.korpa-panel__dno {
  padding: 18px 22px 22px;
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 18%, transparent);
}
.korpa-panel__zbir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.korpa-panel__zbir dt { font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase; color: #a89080; }
.korpa-panel__zbir dd { margin: 3px 0 0; font-size: var(--t-base); font-variant-numeric: tabular-nums; }
.korpa-panel__napomena { margin-bottom: 14px; font-size: var(--t-sm); line-height: 1.45; opacity: .7; }
.korpa-panel__posalji { width: 100%; }
.korpa-panel__isprazni { margin-top: 14px; opacity: .6; }

/* ---------- TRAKA UZ DNO EKRANA (stranica artikla, telefon) ----------
   Pojavi se kad dugme "Dodaj u korpu" ode iznad ekrana (katalog.js). */
.artikal-traka {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(16px, 4vw, 24px) calc(10px + env(safe-area-inset-bottom));
  background: var(--bg-secondary);
  color: var(--text-on-light);
  border-top: 1px solid color-mix(in srgb, var(--base-dark-brown) 22%, transparent);
  animation: traka-ulaz .45s var(--ease);
}
@keyframes traka-ulaz { from { transform: translateY(100%); } }
.artikal-traka__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.artikal-traka__naziv {
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.artikal-traka__kol { font-family: var(--font-sans); font-size: var(--t-sm); opacity: .65; font-variant-numeric: tabular-nums; }
.artikal-traka .artikal__dodaj { height: 46px; }
@media (min-width: 1024px) { .artikal-traka { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .artikal-traka { animation: none; } }

/* ---------- LOGOTIP BRENDA (laminati) ----------
   Pored rednog broja, tacno iznad opisa - ista kolona kao tekst. */
.brend__logo {
  width: auto;
  height: clamp(28px, 2.8vw, 44px);
  object-fit: contain;
  object-position: left center;
}
@media (min-width: 1024px) {
  .brend--logo { grid-template-areas: "redni redni logo logo" "naslov naslov tekst tekst"; }
  .brend--logo .brend__logo { grid-area: logo; align-self: end; }
}

/* ---------- MODELI SA PALETOM (/asortiman/parketi) ----------
   Dvije kartice u mrezi kao artikli: velika tekstura, pa naziv, status i
   paleta boja kolekcije (kvadrati, izabrani sa punim okvirom). */
.modeli {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(16px, 3.2vw, 56px);
  row-gap: clamp(40px, 5vw, 72px);
  padding-inline: clamp(0px, 4vw, 72px);
}
/* tekst blok iznad modela nema svoj donji razmak (.artikli--tekst) */
.artikli--tekst .brend + .modeli { margin-top: clamp(48px, 6vw, 104px); }
.model__slika {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--base-dark-brown) 6%, transparent);
}
.model__slika img { width: 100%; height: 100%; object-fit: cover; }
.model__info { display: grid; gap: 6px; margin-top: clamp(14px, 1.5vw, 22px); }
.model__naziv {
  font-size: var(--t-h3);
  line-height: 1;
}
.model__paleta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.model__paleta button {
  width: 48px;
  height: 48px;
  padding: 2px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition: border-color .35s var(--ease);
}
.model__paleta button:hover { border-color: color-mix(in srgb, var(--base-dark-brown) 35%, transparent); }
.model__paleta button[aria-pressed="true"] { border-color: var(--base-dark-brown); }
.model__paleta button:focus-visible { outline: 1px solid var(--base-dark-brown); outline-offset: 2px; }
.model__paleta img { width: 100%; height: 100%; object-fit: cover; }
.model__info .artikal__upit { justify-self: start; margin-top: 14px; }
@media (max-width: 767px) {
  .modeli { grid-template-columns: minmax(0, 1fr); }
  .model__paleta button { width: 42px; height: 42px; }
}

/* Akcija koristi isti direktni grid kao Kvalitet, ali sedi na braon drvenoj
   pozadini pojasa sa screenshota. */
.kvalitet.kvalitet--akcija {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--base-dark-brown);
  color: var(--base-blush-pink);
}
.kvalitet.kvalitet--akcija::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/drvo.svg") center / cover no-repeat;
  opacity: .65;
}
.kvalitet.kvalitet--akcija > * { position: relative; z-index: 1; }
.kvalitet--akcija .kvalitet__naslov { max-width: 14ch; }
.kvalitet--akcija .kvalitet__brendovi {
  font-size: var(--t-sm);
  letter-spacing: .14em;
}
.kvalitet--akcija .kvalitet__proza { max-width: 30ch; }

/* Naglašeni script naslovi su manji i pri zaustavljanju se poravnavaju u
   sredinu svoje trake. */
.marquee--sa-ponosom span,
.marquee--ugradnja span {
  font-size: clamp(3.8rem, 13vw, 10rem);
}
@media (min-width: 768px) {
  .marquee--sa-ponosom span,
  .marquee--ugradnja span {
    font-size: min(13vw, 22svh);
  }
}

/* Cursive descriptive text: veće, čitljivo i dovoljno sporo da ostane u kadru. */
.marquee { padding-block: .12em; }
.marquee .marquee__track {
  min-width: 100%;
  animation-duration: 110s;
}
.marquee span {
  font-size: clamp(3rem, 10vw, 8rem) !important;
  line-height: .9;
}
@media (max-width: 767px) {
  .marquee span { font-size: clamp(2.6rem, 15vw, 6rem) !important; }
}

/* O nama: veći MT Ponos natpis ostaje centriran, a cijela ponovljena traka
   lagano i ravnomjerno putuje prema desno. */
#o-nama .marquee--o-nama .marquee__track {
  width: max-content;
  min-width: 0;
  gap: clamp(48px, 8vw, 140px);
  margin-inline: auto;
  animation: marquee-o-nama-desno 48s linear infinite;
}
#o-nama .marquee--o-nama span {
  /* manji nego prije (18rem) - sad je natpis u toku teksta (position:static),
     pa njegova visina direktno produzava sekciju; veci font bi ponistio
     "kraca sekcija" efekat cak i sa negativnim marginama */
  font-size: min(18vw, 30svh) !important;
  padding-inline: .3em;
}
@keyframes marquee-o-nama-desno {
  /* Četiri ista natpisa omogućavaju da se povratak na početak ne primijeti. */
  from { transform: translateX(-25%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  #o-nama .marquee--o-nama .marquee__track { animation: none; }
}

/* Kontakt: isti centrirani, veći i spori smjer udesno kao na O nama,
   sa tamnijim tonom da se „Javite se“ jasnije vidi. */
.marquee--kontakt .marquee__track {
  width: max-content;
  min-width: 0;
  gap: clamp(48px, 8vw, 140px);
  margin-inline: auto;
  animation: marquee-o-nama-desno 48s linear infinite;
}
.marquee--kontakt span {
  font-size: clamp(5rem, 22vw, 18rem) !important;
  padding-inline: 0;
  /* boja/opacity dolazi od zajednickog pravila .marquee span */
}
@media (prefers-reduced-motion: reduce) {
  .marquee--kontakt .marquee__track { animation: none; }
}

/* Landing: malo veći script i dodatni vazduh oko uvodne izjave ispod hero-a. */
#ko-smo .marquee--veliki span {
  font-size: clamp(4rem, 20vw, 14rem) !important;
}

/* Ujednačeni script natpisi: centrirani, ponovljeni sa širokim razmacima i
   sa dovoljno vazduha iznad i ispod. Boja/opacity dolazi od zajednickog
   .marquee span pravila - osim natpisa u tamnom zavrsnom pojasu
   (.marquee--footer-ponosom), koji ostaje kremasto bijel da bude citljiv
   na tamnoj pozadini .collective sekcije. */
.marquee--ugradnja,
.marquee--radovi,
.marquee--footer-ponosom {
  margin-block: clamp(28px, 5vw, 80px);
  padding-block: clamp(24px, 4vw, 64px);
}
.marquee--ugradnja .marquee__track,
.marquee--radovi .marquee__track,
.marquee--footer-ponosom .marquee__track {
  width: max-content;
  min-width: 0;
  justify-content: center;
  gap: clamp(56px, 10vw, 180px);
  margin-inline: auto;
  animation: marquee-o-nama-desno 48s linear infinite;
}
.marquee--ugradnja span,
.marquee--radovi span,
.marquee--footer-ponosom span {
  font-size: clamp(5rem, 22vw, 18rem) !important;
  padding-inline: 0;
}
.marquee--footer-ponosom span {
  color: var(--base-cream) !important;
}
@media (prefers-reduced-motion: reduce) {
  .marquee--ugradnja .marquee__track,
  .marquee--radovi .marquee__track,
  .marquee--footer-ponosom .marquee__track { animation: none; }
}

/* Parketi / mobilni 3D prikaz: legenda ide ispod modela, nikad uz njega. */
@media (max-width: 767px) {
  .je-3d .slojevi__scena {
    flex: 0 0 60%;
  }
  .je-3d .slojevi__markeri {
    display: none;
  }
  .je-3d .slojevi__legenda {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 18px var(--gutter) 28px;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}