/* 01-tokens.css */
/* Green Land: osnove.
 *
 * Pravac je „Galerija" iz prezentacije, sa jednom izmjenom koju je klijent
 * tražio na sastanku 16.09.2026: NASLOVI SU DEBLJI. U prezentaciji su stajali
 * na Gambetti 300, najlakšem rezu, i klijentu je baš zbog toga treći prijedlog
 * djelovao upečatljivije („font, jer je boldovan, prvo i nije", 01:15).
 *
 * Težina zato živi u jednom tokenu, --disp-w, a ne u dvadeset pravila. Ako se
 * pokaže da je 500 previše ili premalo, mijenja se ovdje i cijeli sajt prati.
 * Mir i bjelina ostaju: zelena je i dalje samo akcenat, proizvod je taj koji je
 * zelen.
 */

@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/Gambetta-Variable.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/Gambetta-VariableItalic.woff2') format('woff2');
  font-weight: 300 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Switzer';
  src: url('/assets/fonts/Switzer-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122;
}

/* ĆIRILICA. Gambetta i Switzer su latinica i ništa drugo: provjereno
   fontTools-om 17.09.2026, nula znakova u U+0400-04FF u oba. Ruska trećina
   prezentacije je zbog toga padala na sistemski font, isti previd koji na
   radonjicmed.com stoji nepopravljen od 23.08.2026.
   Rješenje je ono koje ribarskoselo.com već koristi: ćirilični pratilac se
   kači POD ISTIM IMENOM PORODICE, po unicode-range. Latinični čitalac nikad ne
   vidi drugi font, a ruski nikad ne vidi Times.
   Gambetta -> Cormorant Garamond (galerijski serif), Switzer -> Onest. */
@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/corm-cyrillic.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/corm-cyrillic-italic.woff2') format('woff2');
  font-weight: 300 700; font-style: italic; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Switzer';
  src: url('/assets/fonts/onest-cyrillic.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --paper: #F6F4EF;
  --paper-2: #EFECE4;
  --white: #FFFFFF;
  --ink: #141A15;
  --ink-2: #4B544D;
  --ink-3: #6E766F;          /* podignuto sa #7C847D: 4,51 na papiru, WCAG AA */
  --moss: #2F6B3A;
  --moss-deep: #1E4A29;
  --lichen: #A9B79A;
  --hair: #DBD7CE;
  --hair-2: #E8E5DD;

  --serif: 'Gambetta', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Switzer', 'Onest', system-ui, -apple-system, sans-serif;

  /* jedina razlika u odnosu na prezentaciju, vidi zaglavlje fajla */
  --disp-w: 500;
  --disp-w-hero: 550;

  --e: cubic-bezier(.22,.8,.2,1);
  --e2: cubic-bezier(.76,0,.24,1);
  --gut: clamp(20px, 4.6vw, 72px);
  --w: min(1440px, 100% - 2 * var(--gut));
  --hdr: 112px;
  /* Sajt je svijetao i samo svijetao. `only light` je ono što Chrome-ov i
     Samsungov „automatski tamni režim" poštuju; bez toga telefon sam zatamni
     papir i fotografije, pa je klijentov snimak heroja 18.09.2026 bio skoro crn. */
  color-scheme: only light;
}

* { margin: 0; padding: 0; box-sizing: border-box }

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

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block }
a { color: inherit }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
input, textarea, select { font: inherit; color: inherit }
::selection { background: #DCE7D3; color: var(--ink) }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px }

.wrap { width: var(--w); margin-inline: auto }
.serif { font-family: var(--serif) }
em { font-style: italic }

/* preskakanje na sadržaj: obavezno, i mora da se vidi kad dobije fokus */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; text-decoration: none; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0 }

/* ----------------------------------------------------------------- naslovi */
.h1 {
  font-family: var(--serif);
  font-weight: var(--disp-w-hero);
  font-size: clamp(40px, 6.1vw, 92px);
  line-height: .99;
  letter-spacing: -.021em;
  max-width: 13ch;
}
.h1 em { font-weight: var(--disp-w-hero); color: var(--moss) }
.h1 .ln { display: block; overflow: hidden }
.h1 .ln span { display: inline-block }

.h2 {
  font-family: var(--serif);
  font-weight: var(--disp-w);
  font-size: clamp(32px, 4.3vw, 60px);
  line-height: 1.03;
  letter-spacing: -.02em;
  max-width: 18ch;
}
.h2 em { color: var(--moss) }

.h3 {
  font-family: var(--serif);
  font-weight: var(--disp-w);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.12;
  letter-spacing: -.015em;
}

.lede {
  font-size: clamp(16px, 1.3vw, 18.5px);
  color: var(--ink-2);
  max-width: 62ch;
  line-height: 1.62;
}
.lede + .lede { margin-top: .9em }

.kick {
  font-size: 12.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss);
  display: flex; align-items: center; gap: 12px;
}
.kick::before { content: ""; width: 28px; height: 1px; background: var(--moss); flex: none }

/* brojač: nula se broji do cilja skriptom, pa ne smije da skače u širini */
.num { font-variant-numeric: tabular-nums }
.num__s { font-size: .5em; letter-spacing: 0; color: var(--moss); margin-left: .18em }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Strelica u svakom dugmetu i linku. Bez ove dimenzije SVG uzme punu širinu
   roditelja, pa je u karticama stajala strelica veća od riječi pored nje. */
.arr { width: 14px; height: 14px; flex: none; vertical-align: -2px; margin-left: 2px }
.card__go .arr { width: 13px; height: 13px }

/* 02-chrome.css */
/* Zaglavlje, mobilni meni, podnožje, lebdeća traka za kontakt. */

#prog { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--moss); z-index: 120 }

/* ------------------------------------------------------------- zaglavlje */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: transform .6s var(--e); will-change: transform }
.hdr.hide { transform: translateY(-100%) }

.tier1 {
  height: 34px; display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; letter-spacing: .02em; color: var(--ink-2);
  background: var(--paper); border-bottom: 1px solid var(--hair); padding-inline: var(--gut);
  position: relative;
}
.tier1 a { text-decoration: none }
.tier1 .t1-mid { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap }
.tier1 .t1-r { display: flex; gap: 18px; align-items: center }
.tier1 .t1-r a:hover { color: var(--moss) }

.tier2 {
  height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair);
  padding-inline: var(--gut); transition: height .5s var(--e);
}
.hdr.mini .tier1 { display: none }
.hdr.mini .tier2 { height: 64px }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none }
.logo img { height: 40px; width: auto; transition: height .5s var(--e) }
.logo .lw { height: 20px; margin-top: 6px }
.hdr.mini .logo img { height: 34px }
.hdr.mini .logo .lw { height: 17px }

.nav { display: flex; gap: clamp(14px, 2vw, 30px); list-style: none }
.nav a {
  text-decoration: none; font-size: 14.5px; font-weight: 500; letter-spacing: .01em;
  display: flex; gap: 7px; align-items: baseline; position: relative; padding: 6px 0;
  white-space: nowrap;
}
.nav a i { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 13px; color: var(--moss) }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--ink); transition: right .45s var(--e) }
.nav a:hover::after, .nav a[aria-current]::after { right: 0 }

.hdr-r { display: flex; justify-content: flex-end; align-items: center; gap: 14px }

/* Prekidač jezika je segmentirana pilula. Na ovom sajtu ima ČETIRI segmenta,
   ne dva, pa je razmak manji nego u prezentaciji, inače gura dugme na 1280. */
.lang { display: inline-flex; align-items: center; gap: 1px; padding: 3px; border: 1px solid var(--hair); border-radius: 999px; background: var(--paper-2) }
.lang a {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; padding: 5px 8px;
  border-radius: 999px; color: var(--ink-3); text-decoration: none;
  transition: background .3s, color .3s;
}
.lang a:hover { color: var(--ink) }
.lang a[aria-current="true"] { background: var(--ink); color: var(--paper) }

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  font-weight: 500; font-size: 14.5px; padding: 12px 20px; border-radius: 999px;
  white-space: nowrap; transition: background .35s, transform .35s var(--e);
}
.cta:hover { background: var(--moss); transform: translateY(-2px) }
.cta svg { width: 14px; height: 14px; flex: none }
.cta--ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.cta--ghost:hover { background: var(--ink); color: var(--paper) }

.burger { display: none; width: 44px; height: 44px; position: relative }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--ink); transition: transform .45s var(--e), top .45s var(--e), opacity .3s }
.burger span:nth-child(1) { top: 16px }
.burger span:nth-child(2) { top: 22px }
.burger span:nth-child(3) { top: 28px }
.burger.open span:nth-child(1) { top: 22px; transform: rotate(45deg) }
.burger.open span:nth-child(2) { opacity: 0 }
.burger.open span:nth-child(3) { top: 22px; transform: rotate(-45deg) }

.mmenu {
  position: fixed; inset: 0; background: var(--paper); z-index: 90;
  display: flex; flex-direction: column; padding: 118px var(--gut) 32px;
  transform: translateY(-102%); transition: transform .7s var(--e2); visibility: hidden;
  overflow-y: auto;
}
.mmenu.open { transform: none; visibility: visible }
.mmenu ul { list-style: none; display: grid; gap: 2px }
.mmenu li a {
  font-family: var(--serif); font-size: clamp(27px, 7vw, 40px); font-weight: var(--disp-w);
  text-decoration: none; display: flex; gap: 14px; align-items: baseline;
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s, transform .6s var(--e);
}
.mmenu.open li a { opacity: 1; transform: none }
.mmenu li a i { font-size: 14px; color: var(--moss); font-style: italic }
.mmenu .mm-foot { margin-top: auto; padding-top: 22px; display: grid; gap: 10px; font-size: 15px; color: var(--ink-2); border-top: 1px solid var(--hair) }
.mmenu .mm-foot a { text-decoration: none }
.mmenu .mm-foot b { color: var(--ink); font-weight: 500 }
.mmenu .lang { justify-self: start }

/* ---------------------------------------------------------------- podnožje */
.ftr { background: var(--ink); color: var(--paper); padding: clamp(56px, 9vh, 104px) 0 28px; margin-top: clamp(60px, 10vh, 120px) }
.ftr a { text-decoration: none }
.ftr a:hover { color: var(--lichen) }
.ftr-big {
  font-family: var(--serif); font-weight: var(--disp-w);
  font-size: clamp(34px, 6vw, 82px); line-height: 1; letter-spacing: -.02em;
  padding-bottom: clamp(34px, 5vh, 62px); border-bottom: 1px solid rgba(246,244,239,.17);
}
.ftr-big em { color: var(--lichen) }
.ftr-g {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(22px, 3vw, 46px);
  padding: clamp(30px, 5vh, 54px) 0; align-content: start;
}
.ftr-g h3 { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lichen); margin-bottom: 14px }
.ftr-g ul { list-style: none; display: grid; gap: 7px; font-size: 15px; color: rgba(246,244,239,.82) }
.ftr-g address { font-style: normal; font-size: 15px; color: rgba(246,244,239,.82); display: grid; gap: 5px }
/* Kolona sa znakom je grid, a sve kolone rastu do visine najviše. Grid sa
   podrazumijevanim align-content razvuče svoje auto redove, pa znak i tekst
   odu na suprotne krajeve. Isti kvar je popravljen na radonjicmed.com
   08.09.2026; align-content se ovdje NE smije izostaviti. */
.ftr-brand { display: grid; align-content: start; gap: 14px }
.ftr-brand img { height: 46px; width: auto }
.ftr-base {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  padding-top: 22px; border-top: 1px solid rgba(246,244,239,.17);
  font-size: 13px; color: rgba(246,244,239,.6);
}

/* ------------------------------------------------- lebdeća traka na telefonu
   U Crnoj Gori se naručuje telefonom i preko WhatsApp-a. Stari sajt nije imao
   nijedno od toga (analiza 13.09.2026), pa je ovo stalno na dohvat palca. */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none;
  grid-template-columns: 1fr 1fr 1fr;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--hair);
  padding-bottom: env(safe-area-inset-bottom);
}
.dock a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 6px; min-height: 58px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-decoration: none;
  border-right: 1px solid var(--hair);
}
.dock a:last-child { border-right: 0 }
.dock a svg { width: 18px; height: 18px }
.dock a.is-cta { background: var(--moss); color: var(--paper) }

/* burger prag je premješten na 1180, vidi dno fajla */
@media (max-width: 760px) {
  /* ⚠ Gornja traka se na telefonu GASI. Adresa, telefon, WhatsApp i e-mail ne
     stanu u 34 px na 390 px: lomili su se u dva reda i prelazili preko logotipa
     (klijentov snimak, 18.09.2026 u 16:50). Poziv i WhatsApp nosi .dock, adresa i
     e-mail su u podnožju i na strani Kontakt. --hdr prati, da heroj ne visi. */
  .tier1 { display: none }
  :root { --hdr: 78px }
  .dock { display: grid }
  body { padding-bottom: 58px }
  .ftr-g { grid-template-columns: 1fr 1fr }
  .ftr-brand { grid-column: 1 / -1 }
}
@media (max-width: 420px) {
  .tier1 { font-size: 11.5px }
  .ftr-g { grid-template-columns: 1fr }
}

/* ---------------------------------------------------------- tijesno zaglavlje
 * Ruski natpisi su najduži („Что мы делаем", „Соберите стену") i na 1380 px
 * su zadnju stavku menija naslanjali na pilulu jezika (Filip, 17.09.2026, na
 * slici). Zaglavlje se zato steže u dva mjerena koraka prije nego što ode u
 * burger: manji razmaci i sitniji rimski brojevi ispod 1560, bez brojeva i
 * uža pilula ispod 1400. Burger ide od 1180, ne 1100. Provjera: razmak
 * meni→pilula mora biti ≥ 16 px na 1200/1280/1366/1440/1536 za sva četiri jezika.
 */
.tier2 { column-gap: clamp(16px, 2vw, 40px) }
@media (max-width: 1560px) {
  .nav { gap: clamp(10px, 1.5vw, 24px) }
  .nav a { font-size: 13.5px }
  .nav a i { font-size: 12px }
  .hdr-r { gap: 10px }
  .cta { padding: 11px 16px; font-size: 14px }
}
@media (max-width: 1400px) {
  .nav a i { display: none }
  .nav a { gap: 0 }
  .lang a { padding: 5px 6px; font-size: 11px; letter-spacing: .03em }
}
@media (max-width: 1180px) {
  /* ⚠ Krije se OMOTAČ <nav>, ne samo lista .nav u njemu. Do 18.09.2026 se krila
     samo lista, a prazan <nav> je ostajao u mreži i zauzimao ćeliju (1,2), pa je
     .hdr-r sa `grid-column: 2` padao u DRUGI red: burger 40 px ispod logotipa,
     zaglavlje 84 px u kutiji od 78 px. Klijent je to vidio na telefonu prvog dana. */
  .nav, .tier2 > nav, .hdr-r .cta, .hdr-r .lang { display: none }
  .burger { display: block }
  .tier2 { grid-template-columns: 1fr auto; grid-template-rows: 1fr }
  .hdr-r { grid-column: 2; grid-row: 1 }
}

/* -------------------------------------------- telefon u donjem desnom uglu
   Filipov nalog 18.09.2026. Broj se ispisuje, ne krije se iza ikone.
   ⚠ Samo iznad 760 px: ispod toga `.dock` već nosi „Pozovite" preko cijele
   širine, pa bi plutajuće dugme sjelo tačno na nju.
   ⚠ DESNI ugao je njegov, lijevi je dugmeta za kolačiće (05-pristanak.css).
   Sklanja se dok je otvoren mobilni meni, kao i sve ostalo što pluta. */
.poziv-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 81;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 12px 15px;
  border-radius: 999px;
  background: var(--moss);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14.5px;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--ink) 75%, transparent);
  transition: background .2s var(--e), transform .2s var(--e), box-shadow .2s var(--e);
}
.poziv-fab svg { width: 18px; height: 18px; flex: none; }
.poziv-fab:hover {
  background: var(--moss-deep);
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--ink) 80%, transparent);
}
.poziv-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 760px) { .poziv-fab { display: none } }
html:has(.mmenu.open) .poziv-fab { display: none }
@media (prefers-reduced-motion: reduce) { .poziv-fab { transition: none } }

/* 03-blocks.css */
/* Dijelovi od kojih su strane sastavljene: sekcija, heroj, kartice, plakete,
   knjiga brojeva, pitanja, preporuke, forma. */

.sec { padding: clamp(66px, 10vh, 132px) 0; position: relative }
.sec--tight { padding-block: clamp(44px, 6vh, 80px) }
.sec--paper2 { background: var(--paper-2) }
.sec-h { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 46px); align-items: baseline; margin-bottom: clamp(28px, 5vh, 54px) }
.sec-n { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--moss); white-space: nowrap }
.sec-h .lede { margin-top: 16px }

/* ------------------------------------------------------------------- heroj */
.hero { padding-top: calc(var(--hdr) + clamp(26px, 6vh, 70px)) }
.hero-g { display: grid; grid-template-columns: minmax(0,52fr) minmax(0,48fr); gap: clamp(26px, 5vw, 76px); align-items: end }
.hero .h1 { margin-top: 22px }
.hero-sub { max-width: 54ch; margin-top: 26px; color: var(--ink-2); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55 }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; align-items: center }
.hero-fig { position: relative }
.hero-fig .ph { aspect-ratio: 4/5; overflow: hidden; background: var(--paper-2) }
.hero-fig img { width: 100%; height: 100%; object-fit: cover }

/* Plaketa ispod fotografije: ovo je galerija, a eksponat ima pločicu. */
.plaque { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: baseline; padding: 13px 0 0; border-top: 1px solid var(--ink); margin-top: 13px; font-size: 13px; color: var(--ink-2) }
.plaque b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 15px; color: var(--ink) }
.plaque .pn { font-family: var(--serif); font-size: 13px; color: var(--moss) }

/* knjiga brojeva */
.ledger { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(38px, 7vh, 80px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair) }
.ledger > div { padding: 22px clamp(12px, 2vw, 28px) 24px; border-right: 1px solid var(--hair) }
.ledger > div:first-child { padding-left: 0 }
.ledger > div:last-child { border-right: 0 }
.ledger b { display: block; font-family: var(--serif); font-weight: var(--disp-w); font-size: clamp(28px, 3.5vw, 48px); line-height: 1; letter-spacing: -.018em }
.ledger b + span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-2) }

/* izjava koja se pali riječ po riječ */
.state { padding: clamp(56px, 9vh, 112px) 0 clamp(38px, 7vh, 86px) }
.state p { font-family: var(--serif); font-weight: var(--disp-w); font-size: clamp(25px, 3.5vw, 48px); line-height: 1.2; letter-spacing: -.018em; max-width: 26ch }
.state p .w { display: inline-block; opacity: .13; transition: opacity .5s }
.state p .w.on { opacity: 1 }
.state p em { color: var(--moss) }

/* ------------------------------------------------------------- mreže karti */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px) }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 34px) }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 26px) }

.card { text-decoration: none; display: block }
.card .ph { aspect-ratio: 3/4; overflow: hidden; background: var(--paper-2) }
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e) }
.card:hover .ph img { transform: scale(1.05) }
.card__n { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--moss); margin-top: 14px; display: block }
.card__t { font-family: var(--serif); font-weight: var(--disp-w); font-size: clamp(20px, 1.7vw, 25px); line-height: 1.15; letter-spacing: -.015em; margin-top: 5px }
.card__p { font-size: 15px; color: var(--ink-2); margin-top: 9px; line-height: 1.55 }
.card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 2px }
.card:hover .card__go { color: var(--moss); border-color: var(--moss) }
.card--wide .ph { aspect-ratio: 4/3 }
.card--flat .ph { aspect-ratio: 1 }

/* red radova: ime, mjesto, vrsta, a fotografija prati miša */
.rows { border-top: 1px solid var(--ink) }
.row {
  display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 16px clamp(14px, 2vw, 34px);
  align-items: baseline; padding: clamp(16px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--hair); text-decoration: none; position: relative;
}
.row:hover { color: var(--moss) }
.row__n { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--moss) }
.row__t { font-family: var(--serif); font-weight: var(--disp-w); font-size: clamp(21px, 2.3vw, 32px); line-height: 1.1; letter-spacing: -.018em }
.row__m { font-size: 13.5px; color: var(--ink-2); margin-top: 6px }
.row__k { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap }
.rowfig { position: fixed; width: 300px; aspect-ratio: 4/3; pointer-events: none; z-index: 60; opacity: 0; transition: opacity .35s; overflow: hidden }
.rowfig.on { opacity: 1 }
.rowfig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s }
.rowfig img.on { opacity: 1 }

/* ---------------------------------------------------------------- mahovina */
/* Vrsta mahovine ima od 17.09.2026 ČETIRI, a strane ponude pokazuju po dvije,
   tri ili sve četiri. Fiksne tri kolone su četvrtu ostavljale samu u drugom
   redu; `auto-fit` sabija prazne trake, pa dvije daju dvije kolone, tri daju
   tri, a četiri stanu u jedan red. */
.moss-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(18px, 2.4vw, 36px) }
.moss-c .ph { aspect-ratio: 1; overflow: hidden; background: var(--paper-2) }
.moss-c .ph img { width: 100%; height: 100%; object-fit: cover }
/* Kvadratni okvir vrste mahovine na strani o mahovini. Do 05.10.2026 su sve
   cetiri fotografije bile uspravne pa su same punile kvadrat; nova fotografija
   loptaste mahovine (Selma, 05.10.2026) je polozena i bez ovoga ostavlja prazan
   pojas ispod sebe. */
img.fill { width: 100%; height: 100%; object-fit: cover }
.moss-c h3 { font-family: var(--serif); font-weight: var(--disp-w); font-size: clamp(21px, 2vw, 28px); letter-spacing: -.015em; margin-top: 16px }
.moss-c .tag { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--moss); margin-top: 4px }
.moss-c p { font-size: 15px; color: var(--ink-2); margin-top: 10px; line-height: 1.55 }

/* Uzorci boja. Nikad kvadratić boje: svaki je isječak iz njihove fotografije,
   što je izričit zahtjev sa sastanka 16.09.2026. */
.sw-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: clamp(12px, 1.6vw, 22px) }
.sw { display: block }
.sw figure { aspect-ratio: 1; overflow: hidden; background: var(--paper-2) }
.sw img { width: 100%; height: 100%; object-fit: cover }
.sw figcaption { font-size: 13.5px; margin-top: 9px; color: var(--ink-2) }
.sw-note { font-size: 13px; color: var(--ink-3); margin-top: 18px; max-width: 64ch }

/* ------------------------------------------------------------------ pitanja */
.faq { border-top: 1px solid var(--ink); max-width: 88ch }
.faq details { border-bottom: 1px solid var(--hair) }
.faq summary {
  display: grid; grid-template-columns: 3rem 1fr 28px; gap: 14px; align-items: baseline;
  padding: clamp(16px, 2vw, 22px) 0; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary:hover { color: var(--moss) }
.faq summary i { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--moss) }
.faq summary h3 { font-family: var(--serif); font-weight: var(--disp-w); font-size: clamp(18px, 1.6vw, 23px); line-height: 1.2; letter-spacing: -.012em }
.faq summary .pm { position: relative; width: 16px; height: 16px; justify-self: end; align-self: center }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; background: var(--ink); transition: transform .35s var(--e) }
.faq summary .pm::before { left: 0; right: 0; top: 7.5px; height: 1.5px }
.faq summary .pm::after { top: 0; bottom: 0; left: 7.5px; width: 1.5px }
.faq details[open] summary .pm::after { transform: rotate(90deg) }
.faq .ans { padding: 0 0 clamp(18px, 2.2vw, 26px) calc(3rem + 14px); color: var(--ink-2); max-width: 70ch }

/* --------------------------------------------------------------- preporuke */
.voices { display: grid; gap: clamp(22px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }
.voice { border-top: 1px solid var(--ink); padding-top: 20px }
.voice blockquote { font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.42; letter-spacing: -.008em }
.voice figcaption { margin-top: 16px; font-size: 14px }
.voice figcaption b { display: block; font-weight: 600 }
.voice figcaption span { color: var(--ink-2) }
.voice .as { display: block; margin-top: 9px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45 }

/* ------------------------------------------------------------------- forma */
.form-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 70px); align-items: start }
.form { display: grid; gap: 16px }
.form h3 { font-family: var(--serif); font-weight: var(--disp-w); font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -.015em }
.form .sub { color: var(--ink-2); font-size: 15.5px; margin-top: -6px }
.f-row { display: grid; gap: 6px }
.f-row label { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2) }
.f-row label .opt { font-weight: 400; letter-spacing: 0; color: var(--ink-3) }
.f-row input, .f-row textarea, .f-row select {
  background: var(--white); border: 1px solid var(--hair); border-radius: 2px;
  padding: 12px 14px; font-size: 16px; width: 100%;
  transition: border-color .3s, box-shadow .3s;
}
.f-row input:focus, .f-row textarea:focus, .f-row select:focus { border-color: var(--moss); box-shadow: 0 0 0 3px rgba(47,107,58,.12); outline: none }
.f-row textarea { min-height: 108px; resize: vertical }
.f-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.f-note { font-size: 13px; color: var(--ink-3); line-height: 1.5 }
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.f-msg { padding: 14px 16px; border-radius: 2px; font-size: 15px; display: none }
.f-msg.on { display: block }
.f-msg--ok { background: #E4EEDD; color: var(--moss-deep) }
.f-msg--err { background: #F3E3DC; color: #7A3418 }
.form button[type="submit"]:disabled { opacity: .55; cursor: progress }

/* strana kontakta: red podataka */
.info { display: grid; gap: 2px; border-top: 1px solid var(--ink) }
.info > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--hair); align-items: baseline }
.info dt, .info .k { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3) }
.info dd, .info .v { font-size: 16.5px }
.info .v a { text-decoration: none; border-bottom: 1px solid var(--hair) }
.info .v a:hover { color: var(--moss); border-color: var(--moss) }
.info .v small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 3px }

/* --------------------------------------------------------- sitno i zajedno */
.note {
  border-left: 2px solid var(--moss); padding: 4px 0 4px 18px;
  color: var(--ink-2); font-size: 15px; max-width: 66ch; line-height: 1.55;
}
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--hair); border-radius: 999px; padding: 5px 12px }
.prose { max-width: 72ch }
.prose p + p { margin-top: 1.05em }
.prose h2 { font-family: var(--serif); font-weight: var(--disp-w); font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.018em; margin: 1.6em 0 .5em }
.prose h3 { font-family: var(--serif); font-weight: var(--disp-w); font-size: clamp(19px, 1.8vw, 24px); margin: 1.4em 0 .4em }
.prose ul, .prose ol { margin: .8em 0 .8em 1.2em; display: grid; gap: .4em }
.prose a { color: var(--moss) }
.crumb { font-size: 13px; color: var(--ink-3); margin-bottom: 14px }
.crumb a { text-decoration: none; border-bottom: 1px solid var(--hair) }
.crumb a:hover { color: var(--moss) }

.pagehead { padding-top: calc(var(--hdr) + clamp(26px, 5vh, 56px)); padding-bottom: clamp(26px, 4vh, 52px) }
.pagehead .h1 { max-width: 16ch }
.pagehead .lede { margin-top: 22px }

.band { background: var(--ink); color: var(--paper); padding: clamp(46px, 7vh, 88px) 0 }
.band .h2 { color: var(--paper) }
.band .h2 em { color: var(--lichen) }
.band .lede { color: rgba(246,244,239,.78) }
.band .cta { background: var(--paper); color: var(--ink) }
.band .cta:hover { background: var(--lichen) }
/* Prozirno dugme na tamnoj traci: ranije je nosilo inline boju teksta u boji
   papira preko papirne pozadine iz pravila iznad, pa je stajalo kao prazna
   pilula (snimak 17.09.2026). */
.band .cta--ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(246,244,239,.5) }
.band .cta--ghost:hover { background: var(--paper); color: var(--ink) }

.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px) }
.gal figure { aspect-ratio: 1; overflow: hidden; background: var(--paper-2) }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e) }
.gal figure:hover img { transform: scale(1.06) }

/* Spisak imenovanih biljaka (dekorativno zelenilo): ista mreža, ali svaka slika
   nosi ime i visinu ISPOD sebe, pa figura ne smije da ostane kvadrat sa
   `overflow: hidden` - potpis bi bio odsječen. Slika je `contain`, a ne
   `cover`, jer su biljke snimljene uspravno na bijeloj podlozi i kadar koji
   ih siječe po vrhu ne pokazuje ono zbog čega je slika tu. */
.gal--named figure { aspect-ratio: auto; overflow: visible; background: none }
.gal--named .ph { aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper) }
.gal--named img { object-fit: contain }
.gal--named figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 10px; font-size: .95rem; line-height: 1.3;
}
.gal--named .gal__m { color: var(--moss); white-space: nowrap; font-variant-numeric: tabular-nums }
/* 05.10.2026, spisak „po porudžbini": mjere kao „100 x 20 x 50 cm" i
   „130-160 cm" uz duga imena („Декоративная изгородь UV") ne staju u kolonu na
   telefonu, a `nowrap` + `1fr` (čiji je minimum sadržaj) gurali su mrežu preko
   ivice ekrana (izmjereno 425 px u 350 na 390, ru). Ćelija sada smije da bude
   uža od sadržaja, a mjera prelazi ispod imena kad ne stane pored njega. */
.gal--named figure { min-width: 0 }
.gal--named figcaption { flex-wrap: wrap; row-gap: 2px }

/* ---------------------------------------------------------------- nit
 * Zelena nit koja se crta niz stranu, potpis ovog dizajna.
 * Debljina i prozirnost se postavljaju PO NIZU iz skripte, jer se nit pri
 * vrhu i pri dnu istanji i ugasi. Zato ovdje NEMA stroke-width: postavljen
 * ovdje, pregazio bi rampu i vratio onaj oštar početak.
 */
/* nit je apsolutna U ODNOSU NA MAIN; bez ovoga se vezuje za viewport i ode
   gore uz stranu */
#main { position: relative }
/* Z-POREDAK, Filipovo pravilo od 17.09.2026: nit ide IZA ELEMENATA, ne iza
   SEKCIJA. Sekcija ne smije da pravi stacking context (bez z-index), pa se njena
   pozadina (papir, tamna traka) crta ISPOD niti; nit je na 2; sadržaj sekcije
   (.wrap) na 3, pa slike i kartice sa pozadinom pokriju nit, a tekst bez
   pozadine je propušta (preko njega je prigušena). Ranije su sekcije imale
   z-index:1 i cijele pozadinske sekcije su gutale nit: „nestaje prečesto". */
#nit { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 2; overflow: visible }
#nitRuns path { fill: none; stroke: var(--moss); stroke-linecap: round; stroke-linejoin: round }
#nitTip circle { fill: var(--moss) }
main section { position: relative }
main section > .wrap, main section > article, main .state > .wrap { position: relative; z-index: 3 }
/* Na telefonu je kolona teksta preko cijele širine, pa nit prolazi bliže
   slovima. Prigušuje se grupno, a rampe na krajevima ostaju iste. */
@media (max-width: 1020px) { #nitRuns { opacity: .42 } }

/* pojavljivanje pri skrolu; bez skripte sadržaj je odmah vidljiv */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--e), transform .8s var(--e) }
.rv.on { opacity: 1; transform: none }
html.no-js .rv { opacity: 1; transform: none }

@media (max-width: 1000px) {
  .hero-g { grid-template-columns: 1fr; gap: 34px }
  .hero-fig { order: -1 }
  .hero .h1 { max-width: none }
  .grid-3, .moss-g { grid-template-columns: 1fr 1fr }
  .grid-4, .gal { grid-template-columns: 1fr 1fr }
  .form-wrap { grid-template-columns: 1fr }
  .sec-h { grid-template-columns: 1fr }
}
@media (max-width: 620px) {
  .grid-3, .grid-2, .grid-4, .moss-g { grid-template-columns: 1fr }
  .gal { grid-template-columns: 1fr 1fr }
  .ledger { grid-template-columns: 1fr; border-bottom: 0 }
  .ledger > div { border-right: 0; border-bottom: 1px solid var(--hair); padding-left: 0 }
  .row { grid-template-columns: 2.4rem 1fr; }
  .row__k { grid-column: 2; }
  .f-2 { grid-template-columns: 1fr }
  .info > div { grid-template-columns: 1fr; gap: 4px }
  .faq summary { grid-template-columns: 2.2rem 1fr 22px }
  .faq .ans { padding-left: calc(2.2rem + 14px) }
  .rowfig { display: none }
}

/* 04-configurator.css */
/* „Sastavite svoj zid".
 *
 * Ovo je ono što je klijent tražio na sastanku 16.09.2026: ne igračka sa devet
 * kvadratića boje, nego alat za kojim Green Land sjedi SA KUPCEM i slaže zid na
 * licu mjesta, a kupac može i sam kod kuće (02:52, 05:09).
 *
 * Zato: uzorci su fotografije njihove mahovine, a ne boje; bira se vrsta, boje,
 * oblik, pismo i tekst; i ispod svega stoji da prikaz nije tačan, jer su to
 * sami rekli i prihvatili (04:53).
 */

/* Pisma za natpis u konfiguratoru. Deklaracija ne skida fajl dok se pismo ne
   upotrijebi, pa ih nose i ostale strane bez ijednog dodatnog zahtjeva.
   Sva četiri su latinica: ruski natpis u mahovini nije nešto što rade, a
   ćirilični rez se ne izmišlja. */
@font-face { font-family: 'Cabinet Grotesk'; src: url('/assets/fonts/CabinetGrotesk-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap }
@font-face { font-family: 'Clash Display';   src: url('/assets/fonts/ClashDisplay-Variable.woff2') format('woff2');   font-weight: 200 700; font-display: swap }
@font-face { font-family: 'Zodiak';          src: url('/assets/fonts/Zodiak-Regular.woff2') format('woff2');          font-weight: 400;     font-display: swap }
@font-face { font-family: 'Erode';           src: url('/assets/fonts/Erode-Variable.woff2') format('woff2');           font-weight: 300 700; font-display: swap }

.cfg { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(22px, 3vw, 46px); align-items: start }

/* ---------------------------------------------------------------- prikaz */
.cfg-stage { position: sticky; top: calc(var(--hdr) + 16px) }
.cfg-room {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  padding: clamp(20px, 3.2vw, 52px);
  display: grid; place-items: center;
  min-height: 340px;
  position: relative; overflow: hidden;
}
/* Nekad je ovdje stajala tamnija traka „poda" na dnu sobe. Sa slobodnim
   oblikom koji lebdi preko nje čitala se kao strana boja i kao kvar (Filip,
   17.09.2026), pa je soba sada jednobojna. */
.cfg-svg { width: 100%; height: auto; max-height: 62vh; filter: drop-shadow(0 18px 34px rgba(20,26,21,.17)) }
.cfg-scale { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); margin-top: 10px; letter-spacing: .04em }
.cfg-warn { font-size: 13px; color: var(--ink-2); margin-top: 14px; border-left: 2px solid var(--moss); padding-left: 14px; max-width: 58ch; line-height: 1.5 }
.cfg-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px }

/* --------------------------------------------------------------- upravljanje */
.cfg-panel { display: grid; gap: 4px; border-top: 1px solid var(--ink) }
.cfg-step { border-bottom: 1px solid var(--hair); padding: 18px 0 20px }
.cfg-step > h3 {
  display: grid; grid-template-columns: 2.1rem 1fr; gap: 10px; align-items: baseline;
  font-family: var(--serif); font-weight: var(--disp-w); font-size: 20px; letter-spacing: -.012em;
  margin-bottom: 14px;
}
.cfg-step > h3 i { font-style: italic; font-size: 13px; color: var(--moss) }
.cfg-hint { font-size: 13px; color: var(--ink-3); margin-top: 10px; line-height: 1.5 }

/* dugmad sa uzorkom: prava fotografija mahovine, nikad polje boje */
.cfg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 9px }
/* Dugme je grid poravnat na VRH: grid ga razvlači na visinu reda, pa se bez
   `align-content` sadržaj centrirao i fotografije u istom redu nisu počinjale
   na istoj liniji (Filip 18.09.2026: „fix these plusses it is broken UI not
   centered"). Znak u uglu je zato i izmješten unutar <figure>. */
.cfg-sw {
  display: grid; grid-template-rows: auto auto; align-content: start;
  border: 0; padding: 0; background: none; text-align: left; border-radius: 2px;
}
.cfg-sw figure {
  position: relative; margin: 0; aspect-ratio: 1; overflow: hidden;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(20,26,21,.09);
}
.cfg-sw img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--e) }
.cfg-sw:hover img { transform: scale(1.07) }
.cfg-sw span { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.25 }
.cfg-sw[aria-pressed="true"] figure { box-shadow: 0 0 0 2px var(--moss), inset 0 0 0 1px rgba(20,26,21,.09) }
.cfg-sw[aria-pressed="true"] span { color: var(--ink); font-weight: 600 }
/* redni broj u miksu (šara), da se vidi koja je boja prva a koja treća */
.cfg-sw b {
  position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--moss); color: var(--paper); font-size: 11px; font-weight: 700;
  display: none; place-items: center; line-height: 1;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.85);
}
.cfg-sw[aria-pressed="true"] b { display: grid }

/* izbor iz reda (vrsta mahovine, oblik, ram) */
.cfg-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px }
.cfg-ch {
  display: grid; gap: 7px; justify-items: center; padding: 11px 8px;
  border: 1px solid var(--hair); background: var(--white); border-radius: 2px;
  font-size: 12.5px; line-height: 1.25; text-align: center; color: var(--ink-2);
  transition: border-color .3s, color .3s;
}
.cfg-ch:hover { border-color: var(--ink-3); color: var(--ink) }
.cfg-ch svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.3 }
.cfg-ch[aria-pressed="true"] { border-color: var(--moss); color: var(--ink); box-shadow: inset 0 0 0 1px var(--moss) }

/* pismo */
.cfg-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px }
.cfg-font {
  border: 1px solid var(--hair); background: var(--white); border-radius: 2px;
  padding: 10px 8px; display: grid; gap: 4px; justify-items: center;
  transition: border-color .3s;
}
.cfg-font:hover { border-color: var(--ink-3) }
.cfg-font[aria-pressed="true"] { border-color: var(--moss); box-shadow: inset 0 0 0 1px var(--moss) }
.cfg-font em { font-size: 24px; line-height: 1; font-style: normal }
.cfg-font span { font-size: 11px; color: var(--ink-3); letter-spacing: .03em }
.cfg-font .mould { font-size: 10.5px; color: var(--moss) }

.cfg-size { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.cfg-size label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink-2) }
.cfg-size input { background: var(--white); border: 1px solid var(--hair); border-radius: 2px; padding: 10px 12px; font-size: 16px }
.cfg-size input:focus { border-color: var(--moss); outline: none }

.cfg-text input {
  width: 100%; background: var(--white); border: 1px solid var(--hair); border-radius: 2px;
  padding: 11px 13px; font-size: 16px;
}
.cfg-text input:focus { border-color: var(--moss); outline: none }

/* sažetak koji ide u upit */
.cfg-sum { display: grid; gap: 7px; font-size: 14px; color: var(--ink-2) }
.cfg-sum div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px }
.cfg-sum dt, .cfg-sum .k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) }
.cfg-sum .v { color: var(--ink) }

@media (max-width: 1020px) {
  .cfg { grid-template-columns: 1fr }
  .cfg-stage { position: static }
  .cfg-svg { max-height: 52vh }
}

/* ------------------------------------------------- panel na vašem zidu
 * Kad posjetilac ubaci fotografiju svog prostora, soba postaje ta fotografija,
 * a panel se u njoj vuče i skalira. Fotografija ostaje u pregledaču: nikad se
 * ne šalje, pa ni CSS ne zna za nju dok je korisnik ne izabere.
 */
.cfg-panel-wrap { width: 100%; display: grid; place-items: center }
.cfg-room.has-photo {
  background-size: cover; background-position: center;
  align-items: start; justify-items: start;
  padding: 0; min-height: 420px;
}
.cfg-room.has-photo::after { display: none }
.cfg-room.has-photo .cfg-panel-wrap {
  position: absolute; left: 50%; top: 50%;
  margin-left: -0%;
  translate: -50% -50%;
  cursor: grab; touch-action: none;
}
.cfg-room.has-photo .cfg-panel-wrap.dragging { cursor: grabbing }
.cfg-room.has-photo .cfg-svg { max-height: none }

.cfg-room-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px }
.cfg-file { position: relative; overflow: hidden; display: inline-flex }
.cfg-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100% }
.cfg-file span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; padding: 9px 15px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hair); background: var(--white);
}
.cfg-file:hover span { box-shadow: inset 0 0 0 1px var(--moss); color: var(--moss) }
.cfg-room-on { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2) }
.cfg-room-on input[type="range"] { width: 130px; accent-color: var(--moss) }
.cfg-room-on button { font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--hair) }
.cfg-room-on button:hover { color: var(--moss); border-color: var(--moss) }

/* `display` u pravilu iznad pobjeđuje atribut hidden, pa su klizač i dugme za
   sklanjanje fotografije stajali vidljivi i prije nego što fotografija postoji.
   Ovo vraća hidden njegovo značenje. */
.cfg-room-on[hidden], .cfg-hint[hidden] { display: none }


/* ---------------------------------------------------------------- koraci
 * Jedan korak na ekranu, napredak iznad, Nazad/Dalje ispod. Prikaz lijevo je
 * ljepljiv, pa se kroz sve korake vidi šta se mijenja.
 */
.cfg-wiz { display: grid; gap: 18px; align-content: start }
.cfg-prog { border-bottom: 1px solid var(--ink); padding-bottom: 14px }
.cfg-prog__n { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); font-weight: 600 }
.cfg-prog__dots { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 12px }
.cfg-prog__dots button { width: 100%; display: grid; gap: 6px; justify-items: start; text-align: left; padding: 0 }
.cfg-prog__dots button i { display: block; width: 100%; height: 3px; background: var(--hair); border-radius: 2px; font-size: 0 }
.cfg-prog__dots button span { font-size: 11px; color: var(--ink-3); line-height: 1.2; display: none }
.cfg-prog__dots li.is-done button i { background: var(--lichen) }
.cfg-prog__dots li.is-on button i { background: var(--moss) }
.cfg-prog__dots li.is-on button span { display: block; color: var(--ink) }
.cfg-step { padding: 4px 0 0 }
.cfg-step > h3 { margin-bottom: 16px; font-size: clamp(22px, 2.1vw, 28px) }
.cfg-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hair) }
.cfg-nav button[disabled] { opacity: .35; cursor: default }
.cfg-nav button[hidden] { display: none }
.cfg-step .form { gap: 12px }
.cfg-step .form h3, .cfg-step .form .sub { display: none }

@media (max-width: 1020px) {
  .cfg-stage { position: sticky; top: 64px; z-index: 2; background: var(--paper); padding-bottom: 10px }
  .cfg-room { min-height: 220px }
  .cfg-svg { max-height: 34vh }
  .cfg-stage .cfg-acts, .cfg-stage .cfg-warn { display: none }
  .cfg-stage > div:last-child { display: none }
}

/* vrsta koja ne prima boju: korak boja ostaje vidljiv, ali prigušen, sa napomenom */
.cfg-natural-note { display: none; margin: 0 0 12px; color: var(--moss) }
.cfg-step.is-natural .cfg-natural-note { display: block }
.cfg-step.is-natural .cfg-swatches, .cfg-step.is-natural .cfg-choices { opacity: .35; pointer-events: none }

/* ------------------------------------------------- druga verzija, 17.09.2026
 * Polja koja korisnik sam dodaje i vuče, logotip iz fajla, još pisama.
 * (Filip na slici prve verzije: „nema slobode, sve je nasumično", „ram je
 * užasan", „dodaj uvoz logotipa".)
 */
@font-face { font-family: 'Satoshi';      src: url('/assets/fonts/Satoshi-Variable.woff2') format('woff2');      font-weight: 300 900; font-display: swap }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/GeneralSans-Variable.woff2') format('woff2');  font-weight: 200 700; font-display: swap }
@font-face { font-family: 'Supreme';      src: url('/assets/fonts/Supreme-Medium.woff') format('woff');          font-weight: 500;     font-display: swap }

.cfg-sub { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 0 0 9px }

/* Dugmad za dodavanje polja nose plus, uvijek vidljiv, jer je klik = dodaj.
   Plus je SVG: slovo „+" u krugu od 22 px nikad ne padne na sredinu, jer ga
   nosi linija teksta, a ne geometrija. */
.cfg-swatches--add .cfg-sw b {
  display: grid; width: 22px; height: 22px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 5px rgba(20,26,21,.3), 0 0 0 1px rgba(20,26,21,.08);
  transition: background .2s, color .2s, transform .2s var(--e);
}
.cfg-swatches--add .cfg-sw b svg { width: 12px; height: 12px; display: block }
.cfg-swatches--add .cfg-sw:hover b,
.cfg-swatches--add .cfg-sw:focus-visible b { background: var(--moss); color: var(--paper); transform: scale(1.12) }
.cfg-swatches--add .cfg-sw:hover figure { box-shadow: 0 0 0 2px var(--moss), inset 0 0 0 1px rgba(20,26,21,.09) }

/* šara: vrste kao red izbora, pa boje i klizači ispod */
.cfg-choices--pat { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) }
.cfg-pat-on { display: grid; gap: 12px; margin-top: 14px }
.cfg-pat-on[hidden] { display: none }

/* ------------------------------------------------------------ SPISAK SLOJEVA
 * Gornji red je ispred. Red se bira klikom, hvata se za hvataljku i vuče, a
 * IZABRANI red se otvara i pokazuje veličinu, oblik i još dva alata. Neizabrani
 * ostaju uski, da se i sa šest slojeva vidi cio spisak bez listanja.
 */
.cfg-sub--layers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 18px 0 8px }
.cfg-sub--layers em {
  font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 12.5px; color: var(--ink-3);
}
.cfg-sub--layers[hidden] { display: none }

.cfg-flds { list-style: none; display: grid; gap: 6px }
.cfg-flds:empty { display: none }
.cfg-flds li {
  display: grid; grid-template-columns: 20px 32px minmax(0, 1fr) auto;
  align-items: center; gap: 4px 9px;
  padding: 7px 9px; border: 1px solid var(--hair); background: var(--white);
  border-radius: 3px; font-size: 13px; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.cfg-flds li:hover { border-color: var(--ink-3) }
.cfg-flds li.is-sel {
  border-color: var(--moss); box-shadow: 0 0 0 1px var(--moss);
  cursor: default;
}
.cfg-flds li.is-over { box-shadow: 0 -2px 0 var(--moss) }
.cfg-flds li.is-moving {
  position: relative; z-index: 3; cursor: grabbing;
  box-shadow: 0 8px 22px rgba(20,26,21,.22); border-color: var(--moss);
}
.cfg-flds.is-sorting li { user-select: none }
.cfg-flds img { width: 32px; height: 32px; object-fit: cover; border-radius: 2px; display: block }
.cfg-fld__n { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.cfg-fld__grip {
  width: 20px; height: 28px; display: grid; place-items: center; color: var(--ink-3);
  background: none; cursor: grab; touch-action: none; border-radius: 3px;
}
.cfg-fld__grip:hover, .cfg-fld__grip:focus-visible { color: var(--moss); background: var(--paper-2) }
.cfg-fld__grip svg { width: 16px; height: 16px }
.cfg-flds li.is-moving .cfg-fld__grip { cursor: grabbing }

.cfg-fld__b { display: flex; gap: 4px; align-items: center }
.cfg-flds button:not(.cfg-fld__grip):not([data-act="shape"]) {
  width: 28px; height: 28px; border-radius: 50%; color: var(--ink-3);
  background: var(--paper-2); display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.cfg-flds button svg { width: 15px; height: 15px; display: block }
.cfg-flds button:not(.cfg-fld__grip):hover:not(:disabled) { background: var(--moss); color: var(--paper) }
.cfg-flds button:disabled { opacity: .3; cursor: default }

/* druga linija reda: samo na izabranom sloju */
.cfg-fld__more { display: none }
.cfg-flds li.is-sel .cfg-fld__more {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  grid-column: 2 / -1; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--hair);
}
.cfg-fld__r { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); letter-spacing: .04em }
.cfg-fld__r input { width: 104px; accent-color: var(--moss) }
.cfg-fld__sh { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; width: 100% }
.cfg-flds button[data-act="shape"] {
  width: 27px; height: 27px; border-radius: 3px; color: var(--ink-3);
  background: var(--paper-2); display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.cfg-flds button[data-act="shape"] svg { width: 17px; height: 17px }
.cfg-flds button[data-act="shape"]:hover { color: var(--moss); background: var(--paper) }
.cfg-flds button[data-act="shape"][aria-pressed="true"] { background: var(--moss); color: var(--paper) }

/* ------------------------------------------------- traka nad izabranim poljem */
.cfg-tool {
  position: absolute; z-index: 4; display: flex; gap: 2px; padding: 4px;
  background: rgba(18,24,19,.88); border-radius: 999px;
  box-shadow: 0 8px 24px rgba(20,26,21,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cfg-tool[hidden] { display: none }
.cfg-tool button {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: none; transition: background .18s, opacity .18s;
}
.cfg-tool button svg { width: 17px; height: 17px; display: block }
.cfg-tool button:hover:not(:disabled) { background: rgba(255,255,255,.2) }
.cfg-tool button:disabled { opacity: .28; cursor: default }
.cfg-fld-tools { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px }
.cfg-link { font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--hair); padding: 0; background: none; line-height: 1.4 }
.cfg-link:hover { color: var(--moss); border-color: var(--moss) }
.cfg-flash { font-size: 13px; color: #a23b1f; margin-top: 8px }
.cfg-fld-tools[hidden], .cfg-flash[hidden], .cfg-logo-on[hidden], .cfg-logo-note[hidden], #cfg-fld-empty[hidden] { display: none }
.cfg-step.is-natural .cfg-flds, .cfg-step.is-natural .cfg-fld-tools, .cfg-step.is-natural .cfg-sub { opacity: .35; pointer-events: none }

/* ono što se hvata na prikazu: polje, logotip, natpis. Nevidljivo dok se ne
   pređe mišem, tada isprekidana bijela ivica; touch-action samo ovdje, da
   prst preko ostatka prikaza i dalje lista stranu. */
/* SAMO hvataljke primaju pokazivac. Do 18.09.2026 je maska polja isla preko
   PRAVOUGAONIKA koji je mnogo veci od mrlje, a maskirano podrucje u Chrome-u
   i dalje hvata klik: pravougaonik posljednjeg polja je tako pokrivao hvataljke
   svih ispod njega i moglo se uhvatiti samo ono na vrhu. To je bilo ono sto je
   Filip prijavio kao „i cant click on it to move it it is so hard to select
   it". Ukras ne prima klik, hvataljka prima. */
.cfg-svg * { pointer-events: none }
.cfg-svg .cfg-fld { pointer-events: all }
.cfg-fld { cursor: grab; touch-action: none; stroke: transparent; stroke-width: 2; transition: stroke .2s; vector-effect: non-scaling-stroke }
.cfg-fld:hover, .cfg-fld.is-hi { stroke: rgba(255,255,255,.8); stroke-dasharray: 7 5 }
/* izabrano polje: puni bijeli okvir sa tamnim obrubom, da se vidi i na
   svijetloj i na tamnoj mahovini */
.cfg-fld.is-sel {
  stroke: #fff; stroke-dasharray: none; stroke-width: 2.5;
  filter: drop-shadow(0 0 1.5px rgba(10,16,11,.9));
}
.cfg-svg g.is-drag .cfg-fld { cursor: grabbing; stroke: rgba(255,255,255,.95); stroke-dasharray: none }

.cfg-range { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2) }
.cfg-range input { flex: 1; max-width: 200px; accent-color: var(--moss) }
.cfg-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); cursor: pointer }
.cfg-check input { accent-color: var(--moss); width: 16px; height: 16px }
.cfg-logo-on { display: grid; gap: 12px; margin-top: 12px }
.cfg-choices--2 { grid-template-columns: 1fr 1fr }
.cfg-logo-note { border-left: 2px solid var(--moss); padding-left: 12px; margin: 0 0 14px; color: var(--ink-2) }
.cfg-logo-note .cfg-link { color: var(--ink) }

/* 05-pristanak.css */
/* Kartica za pristanak na kolačiće i trajno dugme u uglu.
 *
 * ⚠ `.pr-noge` je MREŽA od dvije jednake kolone, ne flex. „Prihvatam" i
 * „Odbijam" moraju biti iste širine i visine: manje dugme za odbijanje je
 * mračni obrazac i obara valjanost pristanka. Sa flex-om širina prati dužinu
 * natpisa, pa bi ruski („Отклонить") razvukao jedno dugme, a njemački drugo.
 * Ispod 380 px se slažu jedno ispod drugog, obje pune širine, i dalje jednake.
 *
 * Kartica se krije dok je otvoren mobilni meni, inače pokrije drugi jezik.
 */

.pristanak {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-bottom));
  opacity: 0;
  transition: opacity .24s ease;
}
.pristanak.on { opacity: 1; }

.pr-zavjesa {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter: blur(2px);
}

.pr-kart {
  position: relative;
  width: min(520px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--ink) 50%, transparent);
  padding: clamp(18px, 3.4vw, 26px);
  transform: translateY(8px) scale(.99);
  transition: transform .24s ease;
}
.pristanak.on .pr-kart { transform: none; }

.pr-glava { display: flex; align-items: center; gap: 10px; }
.pr-glava h2 { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.15; margin: 0; }
.pr-znak { display: grid; place-items: center; width: 30px; height: 30px; color: var(--moss); flex: none; }
.pr-znak svg { width: 26px; height: 26px; }
.pr-x {
  margin-left: auto; width: 32px; height: 32px; flex: none;
  border: 1px solid var(--hair); border-radius: 50%;
  background: transparent; color: inherit; font-size: 19px; line-height: 1; cursor: pointer;
}
.pr-x:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

.pr-lede { margin: 12px 0 4px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

.pr-red { border-top: 1px solid var(--hair); padding: 13px 0 11px; }
.pr-red-h { display: flex; align-items: center; gap: 12px; }
.pr-red-h b { font-size: 14.5px; }
.pr-red p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pr-uvijek {
  margin-left: auto; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}

/* prekidač */
.pr-prek { margin-left: auto; position: relative; display: inline-flex; cursor: pointer; flex: none; }
.pr-prek i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pr-prek input { position: absolute; opacity: 0; width: 0; height: 0; }
.pr-prek span {
  width: 40px; height: 23px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  transition: background .18s ease; display: block;
}
.pr-prek span::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--paper);
  transition: transform .18s ease;
}
.pr-prek input:checked + span { background: var(--moss); }
.pr-prek input:checked + span::after { transform: translateX(17px); }
.pr-prek input:focus-visible + span { outline: 2px solid var(--moss); outline-offset: 2px; }

.pr-red details { margin-top: 8px; }
.pr-red summary {
  font-size: 12.5px; color: var(--ink-3); cursor: pointer;
  letter-spacing: .02em;
}
.pr-red details ul { list-style: none; margin: 8px 0 0; padding: 0; }
.pr-red details li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  padding: 3px 0;
}
.pr-red details code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--ink); flex: none;
}

.pr-vise { margin: 12px 0 0; font-size: 13px; }
.pr-vise a { color: var(--ink-2); text-underline-offset: 3px; }

/* ⚠ dvije JEDNAKE kolone, nikad flex, nikad različite veličine */
.pr-noge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.pr-noge button {
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  white-space: nowrap;
}
.pr-noge button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.pr-noge .pr-da { background: var(--ink); color: var(--paper); }
.pr-noge .pr-da:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }

/* „Sačuvaj izbor" je neutralna sredina i ide ISPOD, preko obje kolone. Da stoji
   u redu sa ostala dva, tri dugmeta u tri kolone bi se sužavala dok im natpisi
   ne bi počeli da se lome, a ruski je najduži. Odluka koja se mjeri (odbiti ili
   prihvatiti) ostaje u dvije jednake kolone iznad. */
.pr-noge .pr-izbor {
  grid-column: 1 / -1;
  min-height: 40px;
  border-color: transparent;
  color: var(--ink-2);
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pr-noge .pr-izbor:hover { color: var(--ink); background: transparent; }
@media (max-width: 379px) {
  .pr-noge { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- trajno dugme u uglu */
.kolacici-dugme {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: var(--paper);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--ink) 60%, transparent);
}
.kolacici-dugme svg { width: 17px; height: 17px; color: var(--moss); }
.kolacici-dugme:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 26%, transparent); }
.kolacici-dugme[hidden] { display: none; }

/* ⚠ DUGME SE SKLANJA DOK HEROJ JOŠ DRŽI DONJU TRAKU PROZORA.
   Dugme u heroju stoji na oko 850 px od vrha strane bez obzira na to koliko je
   prozor visok, a ovo dugme prati dno prozora, pa se sretnu kad je prozor
   visok oko 890 do 950 px. Mjereno 21.09.2026 na `za-arhitekte`, 1440x900:
   „Kolačići" 14,845-111,886 preko dugmeta u heroju 66,853-232,898. To je česta
   visina na ekranu 1920x1080, a greška je stajala od 18.09.2026.
   Ovo je ista nevolja zbog koje dugmeta na telefonu uopšte nema, samo na
   desktopu: u tom uglu nije slobodno dok se heroj ne odskroluje.
   Klasu postavlja `pristanak.js`. Sklanja se `opacity`-jem, ne `display`-em,
   da dugme ostane u nizu za tastaturu i da prelaz ne bude trzaj. */
.kolacici-dugme {
  transition: opacity .22s ease, transform .22s ease;
}
.kolacici-dugme--sklonjeno {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* ⚠ Na telefonu dugmeta NEMA. Ispod 760 px dno drži `.dock`, vrh zaglavlje, a
   slobodnog ugla nema: prva verzija ga je dizala iznad trake i sjedao je tačno na
   „Z" u naslovu heroja (snimak 390 px, 18.09.2026). Povlačenje pristanka na
   telefonu ide kroz vezu „Kolačići" u podnožju, koja je na svakoj strani i koju
   `pristanak.js` sluša isto kao dugme. */
@media (max-width: 760px) {
  .kolacici-dugme { display: none; }
}

/* Kartica i dugme se sklanjaju dok je otvoren mobilni meni. */
html:has(.mmenu.open) .pristanak,
html:has(.mmenu.open) .kolacici-dugme { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pristanak, .pr-kart, .kolacici-dugme { transition: none; }
}