/* ==========================================================================
   HIMZO — BOUTIQUE
   Glavni stylesheet. Jedan fajl, organizovan po sekcijama, bez build koraka.

   SADRŽAJ
   01 Tokeni (boje, tipografija, razmaci, motion)
   02 Reset i baza
   03 Tipografske klase i etikete
   04 Dugmad i micro-interakcije
   05 Traka obavještenja + Header + Mega-meni
   06 Mobilna navigacija
   07 Hero sa videom
   08 Full-width baner slajder
   09 Izlog — "Aktuelno"
   10 Mreža kategorija
   11 Priča / atelje
   12 Newsletter
   13 Footer
   14 Kartica artikla + skeleton stanja
   15 Stranica: Prodavnica
   16 Stranica: Artikal
   17 Korpa (drawer)
   18 Admin panel
   19 Modali, toast, forme
   20 Scroll reveal, reduced motion, print
   ========================================================================== */

/* ==========================================================================
   01 TOKENI
   Paleta: tačno tri smeđe nijanse. Sve ostalo su njihovi tintovi/providnosti,
   nijedna nova boja se ne uvodi.
   ========================================================================== */
:root {
  /* — SMEĐA SKALA —
     Referentna tačka je podnožje: njegov preliv je jedini dio sajta za koji
     je vlasnik rekao da su nijanse tačne. Taj preliv
     (#5c3922 → #462b1b → #35200f → #22140a) je ovdje razvučen u skalu koja
     sada nosi SVAKU tamnu površinu na sajtu.

     Prije ovoga tamnih smeđih je bilo tri nezavisne — tekst (#3a2318),
     tamni blokovi (#4a3021→#2a180f) i blok kategorija (#2f1d12) — i nisu
     bile iz iste porodice: ista tama, tri različita tona. Otud utisak da se
     boje ne slažu. Sve su sada na istoj osi (hue 24–27°). */
  --brown-900: #180d05;     /* najdublje — dno podnožja, veo preko slika */
  --brown-800: #22140a;
  --brown-700: #2c1a0e;     /* tekst i glavna tamna površina */
  --brown-600: #35200f;
  --brown-500: #462b1b;
  --brown-400: #5c3922;     /* najsvjetlija tamna — vrh podnožja */
  --brown-300: #74492b;

  /* — tri smeđe — */
  --espresso: var(--brown-700);  /* tekst, akcenti, dubine */
  --camel: #a87b54;         /* sporedni elementi, linije, hover */
  --cream: #ece0d0;         /* pozadina stranice — prljava bež, ne bijela */

  /* Espresso kao kanali: svaka providnost, sjena i veo na sajtu se računa
     iz OVE tri brojke. Promijeniš ih ovdje i cijela stranica prati. */
  --espresso-rgb: 44, 26, 14;

  /* — izvedeni tonovi (tintovi i sjene gornje tri, ne nove boje) — */
  --paper: #f5eade;         /* kartice iznad cream pozadine */
  --paper-rgb: 245, 234, 222;
  --sand: #d8c0a2;          /* ispune, trake, skeletoni */

  /* Cream u komponentama: ista boja, ali kao kanali, da se providnosti pišu
     kao rgba(var(--cream-rgb), .72) umjesto prepisivanja brojeva. */
  --cream-rgb: 236, 224, 208;

  /* Tekstualni tonovi. Vrijednosti su birane tako da SVAKI prolazi WCAG AA
     (4.5:1) na cream pozadini — otud tri nivoa hijerarhije, a ne pet:
     espresso 11.5:1 · -70 6.9:1 · -55 4.9:1
     Pozadina je toplija i tamnija nego prije, pa su i ovi tonovi spušteni —
     inače bi sekundarni tekst pao ispod praga. */
  --espresso-70: rgba(var(--espresso-rgb),0.82);
  --espresso-55: rgba(var(--espresso-rgb),0.7);
  --espresso-40: rgba(var(--espresso-rgb),0.7);
  --espresso-12: rgba(var(--espresso-rgb),0.12);

  /* Camel nosi karakter marke, ali #a87b54 na ovoj pozadini daje 2.9:1. Sitan
     tekst zato ide u njegovu tamniju nijansu (4.9:1); puni camel ostaje za
     linije, ispune i hover — tamo pravilo kontrasta teksta ne važi. */
  --camel-tekst: #7a4e2f;   /* 5.5:1 na cream, i na istoj osi kao skala */
  --camel-rgb: 168, 123, 84;
  --camel-30: rgba(var(--camel-rgb), 0.3);

  /* — zlato: jedini akcent van smeđe skale —
     Koristi se štedljivo: ispuna glavnog dugmeta, ornamenti, rubovi okvira.
     Espresso na punom zlatu daje 5.1:1, pa tekst na zlatnoj podlozi prolazi. */
  --zlato: #b89253;
  --zlato-svijetlo: #e3c98d;
  --zlato-tamno: #8a6a35;      /* rubovi i sjene, NE tekst */
  /* Za zlatni tekst na svijetloj podlozi — svjetlije nijanse tu padaju
     ispod 4.5:1, pa tekst ide u ovu dubinu (5.9:1 na cream). */
  --zlato-duboko: #6f5426;
  --zlato-rgb: 184, 146, 83;
  /* Zlato je sada RAVNO. Metalni preliv na dugmetu je ono što je sajtu davalo
     ukrasni, mekani ton; puna boja s oštrim rubom radi isti posao a ostaje u
     ključu ostatka. Ime tokena ostaje da se ne mijenja na deset mjesta. */
  --gradijent-zlato: linear-gradient(var(--zlato), var(--zlato));
  /* Topli smeđi preliv za tamne blokove — ISTI raspored zaustavnih tačaka kao
     podnožje, pa svaki tamni blok na sajtu izgleda kao njegov nastavak. */
  --gradijent-smedji: linear-gradient(180deg,
    var(--brown-400) 0%, var(--brown-500) 28%, var(--brown-600) 62%, var(--brown-800) 100%);
  --camel-14: rgba(var(--camel-rgb), 0.14);
  --line: rgba(var(--espresso-rgb),0.16);
  --line-soft: rgba(var(--espresso-rgb),0.08);

  /* — tipografija — */
  /* Ime kuće ima vlastiti font — uklesane rimske verzale sa punim potezom.
     Bodoni je na 10rem toliko tanak da se ime raspadne, pogotovo kad su slova
     ispunjena slikom. Ovo je standardna podjela u modnim kućama:
     logotip jedan font, uredništvo drugi. */
  --font-brand: "Cinzel", "Trajan Pro", "Bodoni Moda", serif;
  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --fs-display: clamp(3.2rem, 9vw, 8rem);
  --fs-h1: clamp(2.5rem, 5.6vw, 4.8rem);
  --fs-h2: clamp(2rem, 4vw, 3.4rem);
  --fs-h3: clamp(1.22rem, 1.9vw, 1.7rem);
  --fs-body: clamp(0.97rem, 0.42vw + 0.86rem, 1.06rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.72rem;

  --track-wide: 0.24em;     /* etikete, eyebrow */
  --track-ui: 0.1em;        /* dugmad, nav */

  /* — prostor — */
  --gutter: clamp(1.15rem, 4vw, 4rem);
  --section-y: clamp(4.5rem, 9vw, 10rem);
  --maxw: 1400px;
  --maxw-text: 62ch;

  /* — forma —
     Bez zaobljenja. Dvopiksleni radijus je bio kompromis koji se ne vidi ali
     se osjeti kao mekoća; nula je odluka. Sve što je ranije lebdjelo na
     mekoj sjeni sada stoji na liniji — sjena ostaje samo tamo gdje sloj
     zaista pluta iznad stranice (modal, korpa, toast). */
  --r: 0px;
  --r-lg: 0px;
  --shadow-sm: none;
  --shadow-md: 0 24px 60px -30px rgba(var(--espresso-rgb), 0.5);
  --shadow-lg: 0 40px 90px -30px rgba(var(--espresso-rgb), 0.55);

  /* Linija je nosivi element ovog dizajna, pa ima svoj token. */
  --rule: 1px solid var(--line);
  --rule-jaka: 1px solid rgba(var(--espresso-rgb), 0.34);

  /* — motion — */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1);
  --t-fast: 0.18s;
  --t: 0.4s;
  --t-slow: 0.9s;

  --header-h: 116px;
}

@media (max-width: 900px) {
  :root { --header-h: 92px; }
}

/* ==========================================================================
   02 RESET I BAZA
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  /* Bez zrna papira — vlasnik je tražio čistu površinu. Toplina dolazi iz
     same boje i iz jednog mekog odsjaja pri vrhu, ne iz teksture. */
  background-color: var(--cream);
  background-image:
    radial-gradient(130% 70% at 50% 0%, rgba(var(--camel-rgb), 0.14) 0%, rgba(var(--camel-rgb), 0) 62%);
  background-repeat: no-repeat;
  background-size: 100% 900px;
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

/* Siva pravougaona bljeskalica na dodir izgleda kao greška, ne kao odziv —
   umjesto nje elementi imaju vlastita :active stanja. */
a, button, .icon-btn, .size, .chip, .filter-link {
  -webkit-tap-highlight-color: transparent;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.06; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--espresso); color: var(--cream); }

/* Traka za skrol u boji sajta — sitnica koju premium sajtovi ne preskaču. */
html { scrollbar-color: var(--camel) var(--cream); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: var(--camel-30);
  border: 3px solid var(--cream);
  border-radius: var(--r);
}
::-webkit-scrollbar-thumb:hover { background: var(--camel); }

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

/* Skip link — prva stanica za tastaturu */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--espresso);
  color: var(--cream);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* — kontejneri — */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 960px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.bleed { width: 100%; }

/* ==========================================================================
   03 TIPOGRAFIJA I ETIKETE
   ========================================================================== */
.display,
.h1, .h2, .h3 { font-family: var(--font-display); font-weight: 400; }

.display { font-size: var(--fs-display); line-height: 0.92; letter-spacing: -0.01em; }
.h1 { font-size: var(--fs-h1); letter-spacing: -0.008em; }
.h2 { font-size: var(--fs-h2); letter-spacing: -0.006em; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; }

.lede {
  max-width: var(--maxw-text);
  font-size: clamp(1.02rem, 0.5vw + 0.92rem, 1.2rem);
  line-height: 1.72;
  color: var(--espresso-70);
  font-weight: 300;
}

.muted { color: var(--espresso-55); }

/* Etiketa: vizuelni citat ušivene etikete u odjeći. Koristi se kao eyebrow
   iznad naslova sekcija — struktura koja govori nešto tačno o predmetu. */
.tag {
  display: inline-block;
  position: relative;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--camel-tekst);
}
.tag::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed var(--camel-30);
  pointer-events: none;
}
.tag--solid { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.tag--solid::after { border-color: rgba(var(--cream-rgb), 0.35); }

.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--camel-tekst);
  font-weight: 500;
}

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Zaglavlje sekcije: naslov lijevo, veza desno, a između njih hairline koji
   popuni prazninu. Bez te linije dva elementa vise odvojeno u praznom redu. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.section--toplo .section-head { border-bottom-color: rgba(var(--cream-rgb), 0.2); }
.section-head__text { display: grid; gap: 1.1rem; justify-items: start; }
.section-head .link { margin-bottom: 0.15rem; }

/* ==========================================================================
   04 DUGMAD
   ========================================================================== */
.btn {
  --btn-bg: var(--espresso);
  --btn-fg: var(--cream);
  --btn-fill: var(--camel-tekst);
  --btn-siv: rgba(var(--cream-rgb), 0.3);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 2.3rem;
  border: 1px solid var(--btn-bg);
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease), transform 0.25s var(--ease);
}
/* Ispuna se razvuče iz lijevog ruba, ne uleti odozdo — mirniji potez. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

/* Prošiv: tanka linija uvučena od ruba, isti motiv kao ušivena etiketa
   drugdje na sajtu. Miruje prigušena, na hover se pojača i odmakne. */
.btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--btn-siv);
  border-radius: 1px;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--t) var(--ease), inset var(--t) var(--ease);
}
.btn:hover::after,
.btn:focus-visible::after { opacity: 1; inset: 5px; }

/* Bez sjene na hover. Dugme se ne podiže sa stranice — ono se PUNI. Meki
   oreol ispod dugmeta je bio jedini razlog zbog kojeg su djelovala kao da
   lebde, a to je suprotno od onoga što ovaj sajt sada radi. */
.btn:hover,
.btn:focus-visible {
  color: var(--cream);
  border-color: var(--btn-fill);
}
.btn:active { transform: translateY(1px); }

/* Obrisna varijanta na svijetloj podlozi. */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--espresso);
  --btn-fill: var(--espresso);
  --btn-siv: var(--espresso-12);
  border-color: var(--espresso);
}
.btn--ghost:hover,
.btn--ghost:focus-visible { color: var(--cream); border-color: var(--espresso); }

/* Na tamnoj podlozi (hero, baner, topla sekcija) obrisno dugme ide u cream. */
.btn--light {
  --btn-bg: var(--cream);
  --btn-fg: var(--espresso);
  --btn-fill: var(--espresso);
  --btn-siv: rgba(var(--espresso-rgb),0.18);
}
.btn--light:hover, .btn--light:focus-visible { color: var(--cream); }

/* NE i `.hero .btn--ghost`. Sva dugmad heroja stoje u `.hero__lede`, a ta
   traka je cream — pravilo je obrisno dugme "Krzno" bojilo u cream na cream
   podlozi, pa ga se nije vidjelo. Ostatak je bio na mjestu: rub, tekst i
   dodirna meta su postojali, samo su bili nevidljivi. */
.banner .btn--ghost,
.section--toplo .btn--ghost {
  --btn-fg: var(--cream);
  --btn-fill: var(--cream);
  --btn-siv: rgba(var(--cream-rgb), 0.24);
  border-color: rgba(var(--cream-rgb), 0.55);
}
.banner .btn--ghost:hover,
.section--toplo .btn--ghost:hover { color: var(--espresso); border-color: var(--cream); }

/* ============ ZLATNO DUGME ============
   Glavni poziv na akciju. Zlato je jedini akcent van smeđe skale i zato ide
   samo ovdje — kad bi ga nosilo svako dugme, prestalo bi značiti "ovo je
   glavna radnja". Tekst je espresso: na punom zlatu daje 5.1:1. */
/* Puna zlatna ploha je bila jedina velika površina te boje na cijelom sajtu i
   uz smeđu skalu je vukla na svoju stranu. Sada je dugme iz iste skale kao
   podnožje, a zlato je ostalo tanka linija na vrhu — akcent, ne materijal.

   Reljef je tvrd, ne mekan: svijetla ivica gore, sjena dolje i puni rub ispod
   dugmeta koji mu daje debljinu. Nema zamućene sjene ispod — dugme ne lebdi
   nad stranicom nego stoji na njoj, kao komad koji se može pritisnuti. */
.btn--zlatno {
  --btn-fg: var(--cream);
  --btn-fill: var(--brown-800);
  --btn-siv: rgba(var(--cream-rgb), 0.22);
  border-color: var(--brown-800);
  background: var(--brown-600);
  color: var(--cream);
  box-shadow:
    inset 0 1px 0 rgba(var(--zlato-rgb), 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 3px 0 var(--brown-900);
  transform: translateY(-1px);
}
.btn--zlatno:hover,
.btn--zlatno:focus-visible {
  color: var(--cream);
  border-color: var(--brown-900);
}
/* Pritisak: dugme sjedne na svoj rub. Pomak i gubitak debljine moraju biti
   isti broj (3px), inače se pri kliku pomjeri sve oko njega. */
.btn--zlatno:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(var(--zlato-rgb), 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 0 var(--brown-900);
}

.btn--sm {
  padding: 0.74rem 1.45rem;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}
.btn--sm::after { inset: 3px; }
.btn--sm:hover::after { inset: 4px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.4; pointer-events: none; box-shadow: none; }

/* Tekstualni link sa linijom koja se ispisuje slijeva */
.link {
  position: relative;
  display: inline-block;
  padding: 0.6rem 0 calc(0.6rem + 3px);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.6rem;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform var(--t) var(--ease);
}
.link:hover::after { transform: scaleX(0); }

/* Ikonice u headeru / korpi */
/* Ikone: umjesto pune ispune na hover dobiju tanki prsten koji se raširi —
   isti jezik kao prošiv na dugmadima. */
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: inherit;
  transition: color var(--t-fast) var(--ease);
}
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.icon-btn:hover::before,
.icon-btn:focus-visible::before { opacity: 0.4; transform: scale(1); }
.icon-btn svg {
  width: 19px; height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn__count {
  position: absolute;
  top: 3px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--espresso);
  color: var(--cream);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0;
  transform: scale(0);
  transition: transform var(--t) var(--ease);
}
.icon-btn__count.is-on { transform: scale(1); }

/* ==========================================================================
   05 HEADER + MEGA-MENI
   ========================================================================== */
/* Traka sa uslovima dostave je stajala iznad headera i uklonjena je: isti
   uslovi već stoje u heroju, u traci firme i u podnožju, a na vrhu su samo
   gurali stranicu naniže i lomili prvi utisak. */

/* ============ HEADER ============
   Na vrhu svake stranice traka je potpuno providna — stranica počinje bez
   okvira. Čim se krene skrolati, ispod nje sjeda matirano staklo sa
   hairline rubom, pa sadržaj koji prolazi ispod ostaje čitljiv, a traka
   dobije težinu. Nema tvrdog prelaza: mijenja se u pola sekunde. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: transparent;
  transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease),
              color 0.4s var(--ease);
}

/* Rub se ne pojavljuje naglo nego se ispiše od sredine prema rubovima. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--line) 18%, var(--line) 82%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.7s var(--ease);
}

/* Skrolana traka je PUNA boja, bez prozirnosti i bez zamućenja.
   Poluprovidna varijanta je propuštala sadržaj ispod da se nazire i na
   nekim prelazima treperila — puna boja je mirna i uvijek izgleda isto. */
.site-header.is-solid {
  background: var(--cream);
  /* Linija, ne sjena — traka se od stranice odvaja rezom. */
  box-shadow: 0 1px 0 0 var(--line);
}
.site-header.is-solid::after { transform: scaleX(1); }

/* Preko hero videa traka nosi svijetli tekst; svugdje drugdje espresso. */
.site-header.is-over-hero { color: var(--cream); }
.site-header.is-over-hero .icon-btn__count { background: var(--cream); color: var(--espresso); }

.header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}
/* Bez ovoga grid kolone odbijaju da se skupe ispod svog sadržaja i traka
   se prelije preko ruba ekrana. */
.header-bar > * { min-width: 0; }

/* Logotip.
   Razmak između slova ostavlja prazninu iza ZADNJEG slova, pa se blok čini
   pomjerenim ulijevo. text-indent jednak razmaku to poništava — ali samo ako
   je isti račun napravljen i za podnaslov, inače se dva reda ne poklapaju.
   Zato oba reda imaju text-align:center i vlastitu kompenzaciju. */
/* Logotip.
   Puna težina (700), ne 500 — tanki potez se na ovoj veličini gubi i ime
   izgleda kao da lebdi. Razmak između slova je smanjen jer teža slova ne
   trebaju toliko zraka da bi disala. */
.brand {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  font-family: var(--font-brand);
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;   /* poništava prazninu iza zadnjeg slova */
  line-height: 1.02;
  white-space: nowrap;
}
/* Podnaslov se RAZVLAČI tačno preko širine imena — od lijevog ćoška slova A
   do desnog ćoška slova N. Zato je razlomljen na riječi i razmaknut flexom:
   `space-between` prvu riječ prilijepi uz lijevu ivicu, zadnju uz desnu, a
   ostatak rasporedi između.

   Kao jedan tekst se ovo ne može složiti. Razmak između slova ostavlja rep
   iza zadnjeg slova, pa se podnaslov uvijek završava malo prije nego ime —
   otud je i izgledalo kao da red ispod "nema smisla". Rep zadnje riječi se
   ovdje poništava negativnom marginom. */
.brand small {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-indent: 0;
  text-transform: uppercase;
  opacity: 0.78;
}
.brand small span:last-child { margin-right: -0.18em; }

/* Ime brenda je dugo i razmaknuto; na uskim ekranima bi razvuklo srednju
   kolonu i izgurala bi ikone iz kadra. Zato se ovdje steže. */
@media (max-width: 700px) {
  .brand { font-size: 1.15rem; letter-spacing: 0.16em; text-indent: 0.16em; }
  .brand small { margin-top: 0.3rem; font-size: 0.46rem; letter-spacing: 0.1em; }
  .brand small span:last-child { margin-right: -0.1em; }
}
@media (max-width: 400px) {
  /* Ne krije se više podnaslov — sad se poklapa sa imenom, pa je dio
     logotipa a ne dodatak koji smeta. Samo se steže. */
  .brand { font-size: 1.02rem; letter-spacing: 0.12em; text-indent: 0.12em; }
  .brand small { font-size: 0.42rem; letter-spacing: 0.06em; }
  .brand small span:last-child { margin-right: -0.06em; }
}

.header-nav { grid-column: 1; justify-self: start; }
.header-tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 0.25rem; }

.nav-list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0;
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.82;
  transition: opacity var(--t-fast) var(--ease);
}
.nav-item:hover > .nav-link,
.nav-link:hover,
.nav-link.is-active { opacity: 1; }

/* Linija se ispisuje iz sredine prema rubovima — smireniji potez od klizanja
   s jedne strane, i ne sudara se sa strelicom mega-menija. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.45s var(--ease);
}
.nav-item { position: relative; }
.nav-item > .nav-link { position: relative; }
.nav-item:hover > .nav-link::after,
.nav-item.is-open > .nav-link::after,
.nav-link.is-active::after { transform: scaleX(1); }

.nav-link__chev {
  width: 8px; height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t) var(--ease);
}
.nav-item.is-open .nav-link__chev { transform: translateY(1px) rotate(-135deg); }

/* — Mega panel: puna širina ispod headera, kao kod velikih modnih kuća — */
.mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 89;
  /* Ista boja kao skrolani header: panel visi s njega i mora izgledati kao
     ista ploha. Ranije je bio --paper, pa se na spoju vidjela linija. */
  background: var(--cream);
  /* Header nad herojem je providan i nosi cream tekst. Panel ima svijetlu
     pozadinu, pa mora vratiti tamnu boju teksta — inače su slova iste boje
     kao podloga i meni se otvori prazan. */
  color: var(--espresso);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
              visibility 0s linear var(--t);
}
.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.mega__inner {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.2rem, 4vw, 3.4rem);
  align-items: start;
}
.mega__col { display: grid; gap: 1.1rem; align-content: start; }
.mega__col-title {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--camel-tekst);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}
.mega__links { display: grid; gap: 0.15rem; }
.mega__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-family: var(--font-display);
  font-size: 1.42rem;
  width: fit-content;
  transition: color var(--t-fast) var(--ease), transform var(--t) var(--ease);
}
.mega__link::before {
  content: "";
  width: 0; height: 1px;
  background: var(--camel);
  transition: width var(--t) var(--ease);
}
.mega__link:hover { color: var(--camel-tekst); transform: translateX(4px); }
.mega__link:hover::before { width: 18px; }
.mega__link small {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--espresso-40);
  letter-spacing: 0.06em;
}

.mega__promo {
  width: clamp(200px, 22vw, 300px);
  display: grid;
  gap: 0.9rem;
  text-decoration: none;
}
.mega__promo-img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
}
.mega__promo-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.mega__promo:hover .mega__promo-img img { transform: scale(1.06); }
.mega__promo-title { font-family: var(--font-display); font-size: 1.15rem; }
.mega__promo-meta { font-size: var(--fs-xs); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--camel-tekst); }

/* Zatamnjenje strane dok je mega otvoren */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(var(--espresso-rgb),0.34);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}
.scrim.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ==========================================================================
   06 MOBILNA NAVIGACIJA
   ========================================================================== */
/* Meni-dugme.
   Bile su tri hairline crtice u praznom kvadratu — na telefonu se jedva
   vidjelo da je to dugme, a i nije govorilo šta radi. Sada su DVIJE deblje
   crte uz ispisanu riječ, u okviru koji se vidi: ista logika kao dugmad
   drugdje na sajtu (oštar rub, puna riječ, bez ikone koja se pogađa).

   Dvije crte, ne tri: sa dvije se križ na otvaranju sklopi iz onoga što je
   već tu, bez one srednje koja mora nestati. */
.burger {
  display: none;
  align-items: center;
  gap: 0.55rem;
  /* Bez okvira. Kvadrat oko crtica je bio jedini uokvireni element u traci —
     pored imena kuće i dvije gole ikone izgledao je kao da je zalutao iz
     drugog sajta. Ostaju crtice i riječ; dodirna meta je i dalje puna
     (44px visine), samo se ne vidi. */
  height: 44px;
  padding: 0 0.2rem;
  color: inherit;
  transition: opacity var(--t-fast) var(--ease);
}
.burger__linije {
  position: relative;
  display: block;
  width: 18px; height: 12px;
  flex: none;
}
.burger__linije i {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--t) var(--ease);
}
.burger__linije i:nth-child(1) { top: 1px; }
.burger__linije i:nth-child(2) { bottom: 1px; }
.burger__rijec {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}
.burger.is-open .burger__linije i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger.is-open .burger__linije i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
/* Bez ispune na dodir — dugme se samo malo prigasi. Ispuna je tražila okvir
   koji se puni, a njega više nema. */
.burger:hover,
.burger:focus-visible { opacity: 0.65; }

.drawer-nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 95;
  width: min(440px, 100%);
  background: var(--paper);
  transform: translateX(100%);
  transition: transform 0.55s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer-nav.is-open { transform: translateX(0); }
.drawer-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gutter);
  border-bottom: 1px solid var(--line-soft);
}
.drawer-nav__body { padding: 1rem var(--gutter) 3rem; }

.acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-align: left;
}
.acc__head .nav-link__chev { transition: transform var(--t) var(--ease); }
.acc.is-open .acc__head .nav-link__chev { transform: translateY(1px) rotate(-135deg); }
/* Visinu postavlja JS (drawerNavModul). CSS varijanta sa grid 0fr→1fr ovdje
   nije pouzdano razrješavala visinu, a ovo je glavna mobilna navigacija. */
.acc__panel {
  height: 0;
  overflow: hidden;
  transition: height var(--t) var(--ease);
}
.acc__panel-inner { overflow: hidden; }
.acc__links { display: grid; padding: 0.4rem 0 1rem; }
.acc__links a {
  padding: 0.6rem 0 0.6rem 1rem;
  border-left: 1px solid var(--line-soft);
  font-size: 0.95rem;
  color: var(--espresso-70);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.acc__links a:hover { color: var(--espresso); border-color: var(--camel-tekst); }
.acc__group-title {
  padding: 0.9rem 0 0.3rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--camel-tekst);
}

@media (max-width: 1080px) {
  .header-nav { display: none; }
  /* Meni preuzima prvu kolonu koju je navigacija ispraznila. */
  .burger { display: inline-flex; grid-column: 1; justify-self: start; }
  /* Mega-paneli su desktop stvar — na mobilnom ih zamjenjuje drawer. Moraju
     ići u display:none, jer visibility:hidden i dalje zauzima prostor i
     njihove tri kolone razvuku stranicu u širinu. */
  .mega { display: none; }
  /* Tekstualni linkovi u desnoj grupi žive u drawer meniju — u traci bi se
     gurali sa ikonama i pali ispod dodirne mete. */
  .header-tools > .nav-link { display: none; }
}

/* ==========================================================================
   07 HERO
   Video puni ekran; preko njega se podiže cream "zavjesa" iz koje je ime
   brenda izrezano — kroz slova se vidi isti kadar. To je potpis stranice.
   ========================================================================== */
.hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  min-height: min(100svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--espresso);
}

.hero__media { position: absolute; inset: 0; }
.hero__media video,
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
/* Zatamnjenje preko kadra. Nije samo raspoloženje — naslov je cream, a kadar
   je krzno koje ume biti vrlo svijetlo: izmjereno na posteru, bez ovoga
   naslov pada na 1.7:1. Video se uz to i mijenja, pa se ne može računati na
   to da će ispod slova baš uvijek biti tamno.

   Dva sloja koja se množe: odozgo, i slijeva gdje tekst i stoji. Desna
   donja polovina ostaje otvorena — tamo se kadar vidi onakav kakav jeste. */
.hero__grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(var(--espresso-rgb), 0.62) 0%,
      rgba(var(--espresso-rgb), 0.3) 42%,
      rgba(var(--espresso-rgb), 0) 68%),
    linear-gradient(100deg,
      rgba(var(--espresso-rgb), 0.62) 0%,
      rgba(var(--espresso-rgb), 0.34) 42%,
      rgba(var(--espresso-rgb), 0) 74%),
    radial-gradient(120% 90% at 30% 25%, rgba(var(--camel-rgb), 0.16) 0%, rgba(var(--espresso-rgb), 0.32) 100%);
}
@media (max-width: 700px) {
  /* Na telefonu naslov ide gotovo preko cijele širine, pa kosi sloj ne
     pomaže — zatamnjenje mora biti odozgo i jače. */
  .hero__grade {
    background:
      linear-gradient(180deg,
        rgba(var(--espresso-rgb), 0.72) 0%,
        rgba(var(--espresso-rgb), 0.6) 46%,
        rgba(var(--espresso-rgb), 0.12) 78%,
        rgba(var(--espresso-rgb), 0) 100%),
      radial-gradient(120% 90% at 30% 25%, rgba(var(--camel-rgb), 0.12) 0%, rgba(var(--espresso-rgb), 0.3) 100%);
  }
}

.hero__top {
  position: relative;
  padding: calc(var(--header-h) + clamp(2rem, 6vw, 5rem)) var(--gutter) 0;
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
  color: var(--cream);
  flex: 1 0 auto;
  display: flex;
  align-items: flex-start;
}
/* Bez `max-width` u ch jedinicama. Naslov je 5.2rem na desktopu, pa ga je
   svaka takva granica lomila na mjestu koje nema veze sa smislom — "Koža"
   pa "i" u novom redu. Prelom nosi <br> u tekstu, a on je tu namjerno. */
.hero__uvod {
  color: var(--cream);
  opacity: 0;
  transform: translateY(14px);
  animation: rise 1s var(--ease) 0.5s forwards;
}
.hero__uvod .eyebrow {
  display: block;
  margin-bottom: 1.1rem;
  color: rgba(var(--cream-rgb), 0.72);
  /* Blok je stegnut na širinu naslova, pa bi se dvije riječi etikete
     prelomile u dva reda i izgledale kao da je nešto puklo. */
  white-space: nowrap;
}
.hero__naslov {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
  /* Sjena je jedva primjetna, ali je razlika između "čita se" i "ne čita se"
     kad kadar iza slova bude svijetao. Video nije statična podloga i preliv
     preko njega ne može pokriti svaki mogući frejm. */
  text-shadow: 0 2px 24px rgba(var(--espresso-rgb), 0.45);
}
.hero__pod {
  margin-top: 1.2rem;
  max-width: 28ch;
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--cream-rgb), 0.82);
  text-shadow: 0 1px 14px rgba(var(--espresso-rgb), 0.5);
}

/* — zavjesa — */
.hero__curtain {
  position: relative;
  width: 100%;
  transform: translateY(100%);
  animation: curtain 1.15s var(--ease) 0.15s forwards;
}
/* Slova su prozor u isti kadar koji se vrti u pozadini */
/* Cream traka ispod heroja: podaci lijevo, poziv na akciju desno. */
.hero__lede {
  background: var(--cream);
  padding: clamp(1.2rem, 2.5vw, 2rem) var(--gutter) clamp(1.6rem, 3vw, 2.4rem);
}
.hero__lede-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

/* Meta kolone: lokacija, naručivanje, plaćanje. */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.4rem, 3vw, 2.8rem);
}
.hero__meta > div {
  display: grid;
  gap: 0.3rem;
  padding-left: 0.95rem;
  border-left: 1px solid var(--line);
}
.hero__meta span {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--camel-tekst);
}
.hero__meta b { font-weight: 500; font-size: 0.92rem; letter-spacing: 0.02em; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2rem);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  color: rgba(var(--cream-rgb), 0.75);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.hero__scroll i {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(rgba(var(--cream-rgb), 0.7), rgba(var(--cream-rgb), 0));
  animation: scroll-hint 2.4s var(--ease-io) infinite;
}

@keyframes curtain { to { transform: translateY(0); } }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes scroll-hint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 700px) {
  .hero { min-height: min(92svh, 760px); }
  /* Kadar je 16:9, a telefon je uspravan — bez pomjeranja se od snimka vidi
     samo sredina bunde i garderoba se prestane čitati kao garderoba. Ovako
     u kadar uđu i ovratnik i ramena. */
  .hero__media video,
  .hero__media img { object-position: center 30%; }
  .hero__scroll { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__pod { max-width: 30ch; }
}

/* Prošiv je uvučena linija koja na dugmetu širine teksta izgleda kao detalj
   šava. Na telefonu se dugme razvuče preko cijele širine i ta ista linija
   postane okvir u okviru — na zlatnoj plohi je izgledala kao debeo bijeli
   ram. Uvučena je manje i prigušena. */
@media (max-width: 700px) {
  .btn::after { inset: 3px; opacity: 0.3; }
  .btn:hover::after, .btn:focus-visible::after { opacity: 0.55; inset: 3px; }
  .btn--sm::after { inset: 2px; }
  .btn--sm:hover::after { inset: 2px; }
}

/* ==========================================================================
   08 FULL-WIDTH BANER SLAJDER
   ========================================================================== */
.banner {
  position: relative;
  width: 100%;
  height: clamp(430px, 62vw, 720px);
  overflow: hidden;
  background: var(--espresso);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.banner.is-dragging { cursor: grabbing; }

.banner__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease-io), visibility 0s linear 1s;
}
.banner__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }

.banner__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.09);
  transition: transform 7s linear;
}
.banner__slide.is-active img { transform: scale(1); }

.banner__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--espresso-rgb),0.62) 0%, rgba(var(--espresso-rgb),0.28) 45%, rgba(var(--espresso-rgb),0.05) 100%);
}

.banner__copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.banner__copy-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  color: var(--cream);
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  max-width: min(var(--maxw), 100%);
}
.banner__slide .banner__copy-inner > * {
  opacity: 0;
  transform: translateY(22px);
}
.banner__slide.is-active .banner__copy-inner > * {
  animation: rise 0.9s var(--ease) forwards;
}
.banner__slide.is-active .banner__copy-inner > *:nth-child(1) { animation-delay: 0.15s; }
.banner__slide.is-active .banner__copy-inner > *:nth-child(2) { animation-delay: 0.28s; }
.banner__slide.is-active .banner__copy-inner > *:nth-child(3) { animation-delay: 0.4s; }
.banner__slide.is-active .banner__copy-inner > *:nth-child(4) { animation-delay: 0.52s; }

.banner__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.012em;
  max-width: 15ch;
}
.banner__text {
  max-width: 40ch;
  color: rgba(var(--cream-rgb), 0.84);
  font-weight: 300;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.7;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(var(--cream-rgb), 0.28);
}
.banner .tag { color: rgba(var(--cream-rgb), 0.9); border-color: rgba(var(--cream-rgb), 0.4); }
.banner .tag::after { border-color: rgba(var(--cream-rgb), 0.25); }
.banner .btn--light:hover { color: var(--cream); }

/* — kontrole — */
.banner__nav {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 3vw, 2.6rem);
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--maxw);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.banner__dots { display: flex; gap: 0.9rem; }
/* Sama traka je visoka 2px, ali dugme oko nje mora biti dovoljno veliko za
   prst — otud 28px visine sa providnom pozadinom. */
.banner__dot {
  position: relative;
  width: clamp(38px, 6vw, 70px);
  height: 28px;
  background: transparent;
}
.banner__dot::before,
.banner__dot i {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
}
.banner__dot::before { background: rgba(var(--cream-rgb), 0.32); }
.banner__dot i {
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
}
.banner__dot.is-active i { animation: dot-fill var(--banner-dur, 6s) linear forwards; }
.banner__dot.is-done i { transform: scaleX(1); }
@keyframes dot-fill { to { transform: scaleX(1); } }

.banner__counter {
  margin-left: auto;
  color: rgba(var(--cream-rgb), 0.8);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  font-variant-numeric: tabular-nums;
}
.banner__arrows { display: flex; gap: 0.4rem; }
.banner__arrow {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(var(--cream-rgb), 0.35);
  color: var(--cream);
  border-radius: 50%;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.banner__arrow:hover { background: rgba(var(--cream-rgb), 0.16); border-color: var(--cream); }
.banner__arrow svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.4; }

@media (max-width: 700px) {
  .banner__veil { background: linear-gradient(180deg, rgba(var(--espresso-rgb),0.3) 0%, rgba(var(--espresso-rgb),0.72) 100%); }
  .banner__arrows { display: none; }
  .banner__nav { gap: 0.8rem; }
}

/* ==========================================================================
   09 VITRINA — "AKTUELNO"
   Bila je harmonika: jedan panel otvoren, dva skupljena u uspravne hrbate sa
   rotiranim nazivom. Izgledalo je dobro na desktopu, ali je kupca tjeralo da
   radi — dva od tri artikla nije mogao ni pročitati bez prelaska mišem.

   Sada je to jedan slab podijeljen vlaskastim linijama: tri stavke, sve tri
   otvorene, razmak između njih je sama linija (gap 1px preko podloge). Nema
   zaobljenja, nema sjena, nema kartice koja lebdi — samo rez. Na hover se
   cijela ćelija PREOKRENE u smeđu, jer je inverzija najjasniji način da se
   kaže "ovo je sada aktivno" bez ijednog ukrasa.
   ========================================================================== */
.vitrina {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}
/* Linije crta svaka ćelija sama, prstenom širine 1px oko sebe. Prsten ide
   IZVAN ćelije, a razmak je tačno 1px, pa se prstenovi susjeda poklope u
   jednu liniju. Zašto ne podloga koja se vidi kroz gap: kad zadnji red nije
   pun, taj postupak ostavi veliki prazan pravougaonik obojen podlogom —
   izgleda kao da nešto nije učitano. Ovako nepostojeća ćelija jednostavno
   ne crta ništa. */
.vitrina__stavka {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--cream);
  color: var(--espresso);
  text-align: left;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(var(--espresso-rgb), 0.24);
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.vitrina__slika {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
}
.vitrina__slika img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Mirna, blago prigušena slika; na hover se otvori u punu boju. */
  filter: saturate(0.82) brightness(0.94);
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
}
.vitrina__idx {
  position: absolute;
  top: 0; left: 0;
  padding: 0.55rem 0.85rem;
  background: var(--espresso);
  color: var(--cream);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  line-height: 1;
}
.vitrina__telo {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: clamp(1.1rem, 1.8vw, 1.7rem);
  border-top: 1px solid rgba(var(--espresso-rgb), 0.24);
}
.vitrina__kat {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--camel-tekst);
}
.vitrina__naziv {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  line-height: 1.1;
}
.vitrina__opis {
  font-size: var(--fs-sm);
  font-weight: 300;
  color: var(--espresso-55);
  /* Dvije linije opisa; treća bi razvukla ćeliju i mreža bi izgubila red. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vitrina__red {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.35rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
}
.vitrina__cijena {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--zlato-duboko);
  /* Cijena se ne prelama. "200 KM" u dva reda je jedina stvar u ovoj mreži
     koju kupac stvarno traži očima. */
  white-space: nowrap;
}
.vitrina__strelica {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  transition: transform var(--t) var(--ease);
}

/* Inverzija — cijela ćelija pređe u smeđu skalu. */
.vitrina__stavka:hover,
.vitrina__stavka:focus-visible {
  background: var(--brown-700);
  color: var(--cream);
  box-shadow: 0 0 0 1px var(--brown-700);
  outline: none;
}
.vitrina__stavka:hover .vitrina__kat,
.vitrina__stavka:focus-visible .vitrina__kat { color: rgba(var(--cream-rgb), 0.7); }
.vitrina__stavka:hover .vitrina__opis,
.vitrina__stavka:focus-visible .vitrina__opis { color: rgba(var(--cream-rgb), 0.72); }
.vitrina__stavka:hover .vitrina__cijena,
.vitrina__stavka:focus-visible .vitrina__cijena { color: var(--zlato); }
.vitrina__stavka:hover .vitrina__telo,
.vitrina__stavka:focus-visible .vitrina__telo { border-top-color: rgba(var(--cream-rgb), 0.3); }
.vitrina__stavka:hover .vitrina__red,
.vitrina__stavka:focus-visible .vitrina__red { border-top-color: rgba(var(--cream-rgb), 0.16); }
.vitrina__stavka:hover .vitrina__idx,
.vitrina__stavka:focus-visible .vitrina__idx { background: var(--zlato); color: var(--espresso); }
.vitrina__stavka:hover .vitrina__slika img,
.vitrina__stavka:focus-visible .vitrina__slika img { filter: none; transform: scale(1.05); }
.vitrina__stavka:hover .vitrina__strelica,
.vitrina__stavka:focus-visible .vitrina__strelica { transform: translateX(4px); }

/* Skeleton dok se artikli učitavaju — jedna ćelija, ista mreža. */
.vitrina__slika.skeleton { display: block; }

@media (max-width: 860px) {
  /* Dvije u red, treća preko cijele širine. Jedna po redu bi od tri artikla
     napravila 1400px skrolanja — isto pravilo po kojem i mreža artikala na
     telefonu drži dvije kartice u redu. */
  .vitrina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitrina__stavka:nth-child(3) { grid-column: 1 / -1; }
  .vitrina__stavka:nth-child(3) .vitrina__slika { aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
  /* U ćeliji od ~190px opis pojede pola visine, a ne kaže ništa što naziv i
     kategorija već nisu rekli. Ostaje na artiklu. */
  .vitrina__opis { display: none; }
  .vitrina__telo { gap: 0.5rem; }
  /* "Pogledaj →" uz cijenu u ćeliji od ~190px prelomi oba u dva reda. Cijela
     ćelija je ionako link, pa na dodiru ta oznaka ništa ne dodaje. */
  .vitrina__strelica { display: none; }
  .vitrina__red { justify-content: flex-start; }
}
/* Ispod 380px dvije kartice postanu preuske za cijenu i "Pogledaj" u istom
   redu — tek tada se prelazi na jednu. */
@media (max-width: 379px) {
  .vitrina { grid-template-columns: 1fr; }
  .vitrina__stavka:nth-child(3) .vitrina__slika { aspect-ratio: 4 / 5; }
}
/* Dodir nema hover — inverzija bi ostala "zaglavljena" nakon tapa. */
@media (hover: none) {
  .vitrina__stavka:hover { background: var(--cream); color: var(--espresso); }
  .vitrina__stavka:hover .vitrina__kat { color: var(--camel-tekst); }
  .vitrina__stavka:hover .vitrina__opis { color: var(--espresso-55); }
  .vitrina__stavka:hover .vitrina__cijena { color: var(--zlato-duboko); }
  .vitrina__stavka:hover .vitrina__idx { background: var(--espresso); color: var(--cream); }
}

/* ==========================================================================
   09b POKRETNA TRAKA (ime brenda)
   Tanka traka koja uvodi u toplu sekciju. Sadržaj je ukrasan (aria-hidden),
   pa se ponavlja dvaput — animacija pomjeri traku za tačno pola svoje širine,
   čime se drugi komplet nađe tamo gdje je bio prvi i petlja se ne vidi.
   ========================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  background: var(--espresso);
  padding-block: clamp(0.42rem, 0.8vw, 0.6rem);
  border-top: 1px solid rgba(var(--cream-rgb), 0.1);
}
/* Rubovi se stapaju u pozadinu da tekst ne ulijeće naglo u kadar. */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 8vw, 120px);
  z-index: 1;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--espresso), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--espresso), transparent); }

.marquee__track {
  display: flex;
  width: max-content;
  /* Sporo: traka je pozadinski detalj, ne poruka koju treba stići pročitati. */
  animation: marquee 95s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  padding-right: clamp(1.4rem, 3vw, 2.8rem);
}
.marquee__group span {
  font-family: var(--font-display);
  font-size: clamp(0.66rem, 0.85vw, 0.86rem);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  white-space: nowrap;
  color: rgba(var(--cream-rgb), 0.82);
}
/* Romb umjesto tačke — sitan citat ušivene etikete iz ostatka sajta. */
.marquee__group i {
  flex: none;
  width: 3.5px; height: 3.5px;
  transform: rotate(45deg);
  background: var(--camel);
}

@keyframes marquee { to { transform: translateX(-50%); } }

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

/* ==========================================================================
   09c TOPLA SEKCIJA
   Vlasnik je tražio manje ravnog bijelog. Ovdje se stranica prekida u topli
   smeđi blok sa živom podlogom — struktura koju ravna boja nema.
   Veo preko podloge nije ukras nego jamstvo: bez njega bi cream tekst na
   svijetlim mrljama pao ispod praga kontrasta.
   ========================================================================== */
/* Podlogu crta ISTO platno kao završnu scenu — vidi 12b. Ranije je ovdje bio
   CSS "mramor": pet zamućenih mrlja u petlji od 34 sekunde. Radio je posao,
   ali je bio drugi materijal od onoga na dnu stranice, pa su se dvije tamne
   sekcije na istoj stranici ponašale različito. Sada je to jedna stvar.

   Boje, brzina i veo su isti; razlika je samo u rasporedu vela, jer ovdje
   sadržaj ide preko cijele širine a ne samo lijevom stranom. */
.section--toplo {
  position: relative;
  color: var(--cream);
  background-color: var(--brown-800);
  /* Zamjena za shader — iste boje, samo bez kretanja. */
  background-image:
    radial-gradient(62% 55% at 74% 32%, rgba(224, 189, 148, 0.42) 0%, rgba(224, 189, 148, 0) 66%),
    radial-gradient(52% 48% at 88% 76%, rgba(var(--camel-rgb), 0.5) 0%, rgba(var(--camel-rgb), 0) 68%),
    radial-gradient(70% 60% at 26% 66%, rgba(92, 57, 34, 0.7) 0%, rgba(92, 57, 34, 0) 72%);
  overflow: hidden;
  isolation: isolate;
}
.section--toplo__platno {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.section--toplo.je-zivo .section--toplo__platno { opacity: 1; }

/* Veo. Ista uloga kao u završnoj sceni: bez njega cream naslov preko svijetle
   mrlje padne ispod praga.

   Pada dijagonalno, od gore-lijevo prema dolje-desno. Gore su naslov i link
   "Sve odjednom" i tamo je najgušći; dolje-desno je prazno mjesto pored
   zadnjeg reda kartica i tamo se pušta da se podloga vidi. Ravnomjeran veo
   je ovdje probao prvo i sekcija je ispala ravna — kartice pokriju sredinu,
   pa se od šuma nije vidjelo ništa. */
.section--toplo__veo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(158deg,
    rgba(21, 11, 4, 0.87) 0%,
    rgba(21, 11, 4, 0.8) 28%,
    rgba(21, 11, 4, 0.54) 62%,
    rgba(21, 11, 4, 0.24) 100%);
  transition: opacity 1s var(--ease);
}
.section--toplo:not(.je-zivo) .section--toplo__veo { opacity: 0.66; }

.section--toplo .h2,
.section--toplo .h3 { color: var(--cream); }
.section--toplo .muted,
.section--toplo .lede { color: rgba(var(--cream-rgb), 0.76); }
/* Puna cream boja, ne prigušena: preko svijetlih mrlja podloge 90% pada na
   4.38:1, tik ispod praga. */
.section--toplo .tag {
  color: var(--cream);
  border-color: rgba(var(--cream-rgb), 0.34);
}
.section--toplo .tag::after { border-color: rgba(var(--cream-rgb), 0.22); }
.section--toplo .link { color: var(--cream); }
.section--toplo .btn--ghost {
  --btn-fg: var(--cream);
  border-color: rgba(var(--cream-rgb), 0.5);
}

/* ==========================================================================
   10 MREŽA KATEGORIJA
   ========================================================================== */
/* Ista logika kao vitrina, samo na tamnoj podlozi: mreža je jedan slab, a
   razmak između ćelija je linija. Naziv više ne pluta preko slike na mekom
   prelivu nego stoji u vlastitoj traci ispod nje, odvojen rezom — čitljivo
   je bez obzira šta je na fotografiji ispod. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
}
/* Isti prsten kao u vitrini — kategorija ima osam, pa zadnji red gotovo
   nikad nije pun i podloga kroz gap ovdje ne dolazi u obzir. */
.cat-card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--brown-700);
  color: var(--cream);
  box-shadow: 0 0 0 1px rgba(var(--cream-rgb), 0.22);
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.cat-card__slika {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--brown-600);
}
.cat-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
  filter: brightness(0.82) saturate(0.85);
}
.cat-card__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-top: 1px solid rgba(var(--cream-rgb), 0.22);
  transition: border-color var(--t) var(--ease);
}
.cat-card__name { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15; }
.cat-card__count {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  color: rgba(var(--cream-rgb), 0.68);
  white-space: nowrap;
  transition: color var(--t) var(--ease);
}

/* Inverzija na hover — ćelija pređe u cream, isti potez kao u vitrini. */
.cat-card:hover,
.cat-card:focus-visible {
  background: var(--cream);
  color: var(--espresso);
  box-shadow: 0 0 0 1px var(--cream);
  outline: none;
}
.cat-card:hover img,
.cat-card:focus-visible img { transform: scale(1.05); filter: none; }
.cat-card:hover .cat-card__label,
.cat-card:focus-visible .cat-card__label { border-top-color: rgba(var(--espresso-rgb), 0.28); }
.cat-card:hover .cat-card__count,
.cat-card:focus-visible .cat-card__count { color: var(--camel-tekst); }

/* Na telefonu auto-fit spusti mrežu na JEDAN stupac, a osam kategorija pune
   visine je oko 4000px skrolanja — kupac nikad ne vidi cijelu ponudu odjednom.
   Zato dvije u redu i kvadratna slika: cijela mreža stane u dva ekrana. */
@media (max-width: 700px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-card__slika { aspect-ratio: 1 / 1; }
  .cat-card__label {
    /* U ćeliji od ~175px naziv i broj ne stanu u isti red. */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.8rem 0.9rem;
  }
  .cat-card__name { font-size: 1.08rem; }
}

@media (hover: none) {
  .cat-card:hover { background: var(--brown-700); color: var(--cream); }
  .cat-card:hover .cat-card__count { color: rgba(var(--cream-rgb), 0.68); }
}

/* ==========================================================================
   11 PRIČA / ATELJE
   ========================================================================== */
.story {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}
.story__media { position: relative; }
.story__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.story__media::after {
  content: "";
  position: absolute;
  inset: clamp(0.7rem, 1.6vw, 1.4rem);
  border: 1px solid rgba(var(--cream-rgb), 0.35);
  pointer-events: none;
}
.story__text { display: grid; gap: 1.5rem; justify-items: start; }

/* Podaci u nizu (dostava / plaćanje / veličine).
   Vrijednost nije uvijek broj — "Pouzećem" je duga riječ koja je pri starim
   veličinama izlazila iz svoje kolone i naslanjala se na susjednu. Zato
   min-width:0 (grid kolone se inače odbijaju skupiti), prelom dugih riječi i
   umjerenija veličina. Uspravna linija razdvaja stupce i kad su tijesni. */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr));
  gap: 1.4rem 2rem;
  margin-top: 0.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  width: 100%;
}
.figure {
  min-width: 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
}
.figure__n {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.figure__l {
  margin-top: 0.45rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--espresso-55);
  overflow-wrap: anywhere;
}
.section--toplo .figure { border-left-color: rgba(var(--cream-rgb), 0.22); }
.section--toplo .figure__l { color: rgba(var(--cream-rgb), 0.72); }

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

/* ==========================================================================
   11a GALERIJA — dijagonalne trake
   Tri reda okvira nagnuta pod uglom, svaki klizi u suprotnom smjeru.
   Rubovi se stapaju u pozadinu, pa trake izgledaju kao da ulaze i izlaze
   iz stranice. Prazni okviri čekaju fotografije: kad se u media-config.js
   upiše putanja, okvir se sam pretvori u sliku.
   ========================================================================== */
.galerija {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  background-image: var(--gradijent-smedji);
  color: var(--cream);
}
.galerija::before,
.galerija::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--zlato-rgb), 0.5) 50%, transparent);
  z-index: 3;
}
.galerija::before { top: 0; }
.galerija::after { bottom: 0; }

.galerija__uvod {
  position: relative;
  z-index: 3;
  max-width: var(--maxw);
  margin: 0 auto clamp(2rem, 4vw, 3.2rem);
  padding-inline: var(--gutter);
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  text-align: center;
}
.galerija__uvod .tag {
  color: var(--cream);
  border-color: rgba(var(--cream-rgb), 0.34);
}
.galerija__uvod .h2 { color: var(--cream); }
.galerija__uvod p {
  max-width: 46ch;
  color: rgba(var(--cream-rgb), 0.72);
  font-weight: 300;
}

/* Scena je šira od ekrana jer se rotira — inače bi rotacija otkrila uglove. */
.galerija__scena {
  position: relative;
  width: 190%;
  left: -45%;
  display: grid;
  gap: clamp(0.7rem, 1.4vw, 1.2rem);
  transform: rotate(-7deg);
  pointer-events: none;
}
.galerija__red { display: flex; overflow: hidden; }
.galerija__traka {
  display: flex;
  flex: none;
  gap: clamp(0.7rem, 1.4vw, 1.2rem);
  padding-right: clamp(0.7rem, 1.4vw, 1.2rem);
  animation: galerija-lijevo var(--brzina, 60s) linear infinite;
}
.galerija__traka--desno { animation-name: galerija-desno; }

@keyframes galerija-lijevo {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes galerija-desno {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.galerija__okvir {
  position: relative;
  flex: none;
  width: clamp(150px, 20vw, 260px);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(var(--cream-rgb), 0.04);
  box-shadow: inset 0 0 0 1px rgba(var(--cream-rgb), 0.14);
}
.galerija__okvir img { width: 100%; height: 100%; object-fit: cover; }

/* Prazno mjesto: isprekidani zlatni okvir sa oznakom, da se odmah vidi
   gdje fotografija ide i da praznina izgleda namjerno, a ne kao greška. */
.galerija__okvir--prazan {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  border: 1px dashed rgba(var(--zlato-rgb), 0.45);
  background:
    linear-gradient(140deg, rgba(var(--zlato-rgb), 0.08), rgba(var(--cream-rgb), 0.02));
}
.galerija__okvir--prazan span {
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--zlato-rgb), 0.85);
}
.galerija__okvir--prazan i {
  width: 26px; height: 26px;
  position: relative;
  opacity: 0.75;
}
.galerija__okvir--prazan i::before,
.galerija__okvir--prazan i::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: rgba(var(--zlato-rgb), 0.9);
}
.galerija__okvir--prazan i::before { width: 100%; height: 1px; }
.galerija__okvir--prazan i::after { width: 1px; height: 100%; }

/* Meko stapanje lijevog i desnog ruba u pozadinu bloka. */
.galerija__rub {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(60px, 12vw, 200px);
  z-index: 2;
  pointer-events: none;
}
.galerija__rub--l { left: 0; background: linear-gradient(90deg, var(--brown-700), transparent); }
.galerija__rub--d { right: 0; background: linear-gradient(270deg, var(--brown-800), transparent); }

@media (max-width: 700px) {
  .galerija__scena { width: 240%; left: -70%; transform: rotate(-9deg); }
}
@media (prefers-reduced-motion: reduce) {
  .galerija__traka { animation: none; }
}

/* ==========================================================================
   11b KORACI NARUČIVANJA
   Proces je stvarni slijed, pa brojevi ovdje nose informaciju, ne dekor.
   Broj je samo kontura — dovoljno velik da vodi pogled, dovoljno prazan da
   ne guši naslov ispod sebe.
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3.5rem);
}
.step {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
.step__n {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px var(--camel);
}
@supports not (-webkit-text-stroke: 1px black) {
  .step__n { color: var(--camel-30); }
}
.step h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; }
.step p { color: var(--espresso-70); font-size: var(--fs-sm); line-height: 1.7; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 1.4rem; }
}


/* ==========================================================================
   12 NEWSLETTER
   ========================================================================== */
.news {
  background: var(--espresso);
  color: var(--cream);
  border-radius: var(--r);
  padding: clamp(2.5rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.news .tag { color: rgba(var(--cream-rgb), 0.85); border-color: rgba(var(--cream-rgb), 0.35); }
.news .tag::after { border-color: rgba(var(--cream-rgb), 0.2); }
.news__title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.05; }
.news__text { color: rgba(var(--cream-rgb), 0.72); font-weight: 300; margin-top: 1rem; max-width: 44ch; }
.news__form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.news__form .field { flex: 1 1 220px; }
.news__form input {
  width: 100%;
  padding: 1rem 1.1rem;
  background: transparent;
  border: 1px solid rgba(var(--cream-rgb), 0.3);
  border-radius: var(--r);
  color: var(--cream);
}
.news__form input::placeholder { color: rgba(var(--cream-rgb), 0.45); }
.news__form input:focus { border-color: var(--cream); outline: none; }
.news__note { margin-top: 0.9rem; font-size: var(--fs-xs); color: rgba(var(--cream-rgb), 0.62); }
.news__akcije { display: grid; gap: 0.75rem; align-content: center; }
@media (max-width: 860px) { .news { grid-template-columns: 1fr; } }

/* ==========================================================================
   12b KONTAKT SCENA — živa podloga (WebGL)
   Ovdje je do sada stajao .news blok: tamni pravougaonik širine pola
   stranice, sa kremom oko sebe. Problem nije bila boja nego razmjera —
   poziv na razgovor je najvažnija radnja na stranici, a izgledao je kao
   kutija u koju je nešto ostalo da se ubaci.

   Sada blok ide od ruba do ruba i visok je pola ekrana. Podlogu crta WebGL:
   simplex šum u smeđoj skali sajta koji se polako prelijeva, sa vinjetom i
   zrnom. Kad WebGL-a nema, ostaje CSS preliv iz istih boja — zato su one
   ovdje ispisane i kao pozadina, a ne samo u JS-u.

   Platno NIJE na ovoj sekciji nego na .finale omotaču iznad nje, koji drži i
   podnožje. Zato između kontakta i podnožja nema ni šava ni ruba: to je
   jedna površina kroz koju obje sekcije puštaju istu podlogu.
   ========================================================================== */
/* Omotač postoji na SVIM stranicama (SHELL ga uvijek ispiše), ali scenu nosi
   samo ona koja ima data-velaris. Zato je atribut dio selektora: bez njega bi
   prodavnica, artikal, o-nama, kontakt i admin ostali bez svog podnožja —
   dobili bi ovu pozadinu, a podnožje bi im postalo providno. */
.finale[data-velaris] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--cream);
  background-color: var(--brown-800);
  /* Zamjena za shader: iste boje, samo bez kretanja. */
  background-image:
    radial-gradient(46% 34% at 74% 16%, rgba(224, 189, 148, 0.45) 0%, rgba(224, 189, 148, 0) 66%),
    radial-gradient(40% 30% at 88% 42%, rgba(var(--camel-rgb), 0.5) 0%, rgba(var(--camel-rgb), 0) 68%),
    radial-gradient(56% 40% at 26% 34%, rgba(92, 57, 34, 0.65) 0%, rgba(92, 57, 34, 0) 72%);
  /* Zlatna nit samo na vrhu — dolje je kraj stranice, ne rez. */
  border-top: 1px solid rgba(var(--zlato-rgb), 0.5);
}
.finale__platno {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  /* Platno se pojavi tek kad prvi kadar bude nacrtan — inače bi na trenutak
     bljesnulo crno preko topljeg CSS preliva. */
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.finale.je-zivo .finale__platno { opacity: 1; }

.kontakt-scena {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(480px, 58vh, 660px);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

/* Veo. Nije ukras nego uslov čitljivosti: izmjereno, najsvjetlija tačka koju
   šum proizvede je oko rgb(222,179,135) i cream tekst preko nje daje 1.5:1.

   JEDAN veo preko cijelog završnog bloka, ne jedan po sekciji. Prvi pokušaj
   je imao dva — jedan na kontaktu, drugi na podnožju — i na njihovom spoju
   se pojavila svijetla vodoravna pruga, jer su se dvije različite gustine
   susrele na oštroj granici. Ovako granice nema: gustina je funkcija
   položaja u bloku, a ne toga u kojoj se sekciji nalazi.

   Dva sloja koja se množe:
   · vodoravni — tamni lijevo gdje stoji tekst kontakta, otvara se desno;
   · okomiti — ne radi ništa u gornjoj trećini, pa se prema dnu zgušnjava.
     Tako podnožje dobije gustinu koja mu treba za sitan tekst, a da se
     nigdje ne vidi gdje počinje.

   Izmjereno kroz šest trenutaka animacije, po cijeloj tekstualnoj zoni:
   najgori kontrast u kontaktu je 5.3:1, u podnožju 5.1:1. Oba su iz uglova
   gdje teksta ni nema, pa je stvarno stanje bolje od toga. */
.finale__veo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(21, 11, 4, 0) 0%,
      rgba(21, 11, 4, 0) 34%,
      rgba(21, 11, 4, 0.42) 50%,
      rgba(21, 11, 4, 0.72) 62%,
      rgba(21, 11, 4, 0.86) 82%,
      rgba(21, 11, 4, 0.93) 100%),
    linear-gradient(96deg,
      rgba(21, 11, 4, 0.82) 0%,
      rgba(21, 11, 4, 0.7) 45%,
      rgba(21, 11, 4, 0.3) 78%,
      rgba(21, 11, 4, 0.12) 100%);
  transition: opacity 1s var(--ease);
}
/* Kad shader ne radi, ispod je samo CSS preliv — a on je osjetno tamniji od
   šuma. Puni veo bi ga ugasio u ravnu smeđu, pa se ovdje spušta na 62%. */
.finale:not(.je-zivo) .finale__veo { opacity: 0.62; }

.kontakt-scena__wrap { width: 100%; }
.kontakt-scena__blok {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  max-width: 54ch;
}
.kontakt-scena .tag {
  color: var(--cream);
  border-color: rgba(var(--cream-rgb), 0.4);
}
.kontakt-scena .tag::after { border-color: rgba(var(--zlato-rgb), 0.5); }
.kontakt-scena__naslov {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.02;
  margin: 0.2rem 0 0;
}
.kontakt-scena__tekst {
  max-width: 46ch;
  font-weight: 300;
  color: rgba(var(--cream-rgb), 0.82);
}
.kontakt-scena__akcije { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }
.kontakt-scena .btn--ghost {
  --btn-fg: var(--cream);
  --btn-fill: var(--cream);
  --btn-siv: rgba(var(--cream-rgb), 0.24);
  border-color: rgba(var(--cream-rgb), 0.55);
}
.kontakt-scena .btn--ghost:hover,
.kontakt-scena .btn--ghost:focus-visible { color: var(--espresso); border-color: var(--cream); }

.kontakt-scena__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.8rem;
  width: 100%;
  margin: 0.8rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--cream-rgb), 0.24);
}
.kontakt-scena__meta dt {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.62);
}
.kontakt-scena__meta dd {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

@media (max-width: 860px) {
  /* Na uskom ekranu tekst ide preko cijele širine, pa vodoravni sloj otpada —
     kosi preliv bi na desnoj ivici pustio slova preko svijetle mrlje. Ostaje
     samo okomiti, i to gušći, jer podnožje ovdje zauzima veći dio bloka. */
  .finale__veo {
    background: linear-gradient(180deg,
      rgba(21, 11, 4, 0.74) 0%,
      rgba(21, 11, 4, 0.7) 30%,
      rgba(21, 11, 4, 0.82) 62%,
      rgba(21, 11, 4, 0.92) 100%);
  }
  .kontakt-scena { min-height: 0; }
  .kontakt-scena__meta { gap: 1.1rem 2rem; }
}

/* ==========================================================================
   12c TRAKA FIRME
   Svijetli rez između galerije i završnog bloka. Bez njega bi tamno išlo bez
   prekida od kategorija do dna stranice i sve bi se stopilo u jednu masu.
   Par je tamnoj traci na samom vrhu stranice — ista visina, isto pismo,
   obrnute boje.
   ========================================================================== */
.traka-firme {
  padding: 0.9rem var(--gutter);
  background: var(--paper);
  color: var(--espresso);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid rgba(var(--zlato-rgb), 0.45);
}
.traka-firme p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 1.15rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--espresso-70);
}
.traka-firme b {
  font-family: var(--font-brand);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--espresso);
}
/* Romb stoji UNUTAR stavke, ne između njih: tako se skrivanjem stavke gubi i
   njen razdjelnik, pa traka na telefonu ne završi sa rombom u prazno. */
.traka-firme span {
  display: inline-flex;
  align-items: center;
  gap: 1.15rem;
}
/* Isti zlatni romb kao u pokretnoj traci — razdvaja podatke bez interpunkcije. */
.traka-firme i {
  width: 4px;
  height: 4px;
  background: var(--zlato);
  transform: rotate(45deg);
  flex: none;
}
@media (max-width: 560px) {
  /* Četiri podatka se na 390px prelome u dva reda i traka prestane biti
     traka. Ostaju ime i djelatnost — grad i uslovi narudžbe ionako stoje u
     podnožju, dva ekrana niže. */
  .traka-firme p { gap: 0.4rem 0.85rem; letter-spacing: 0.06em; }
  .traka-firme span { gap: 0.85rem; }
  /* Ime roditelja u selektoru nije ukras: `.traka-firme span` iznad ima veću
     specifičnost od same klase i vratio bi `display: inline-flex`. */
  .traka-firme .traka-firme__vise { display: none; }
}

/* — društvene mreže — */
.socials { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.socials--stupac { margin-block: 1.2rem; }
.socials__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.socials__link:hover { border-color: var(--espresso); background: var(--camel-14); }
.socials__link svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; stroke-width: 1.5;
}

.kontakt-akcije { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* — podaci radnje u podnožju — */
.footer-info { margin-top: 1.4rem; display: grid; gap: 0.55rem; }
.footer-info > div { display: flex; gap: 0.6rem; flex-wrap: wrap; font-size: var(--fs-sm); }
.footer-info dt { color: var(--espresso-40); min-width: 7.5rem; }
.footer-info dd { margin: 0; color: var(--espresso-70); }
.footer-info a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.footer-info a:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   13 FOOTER
   ========================================================================== */
/* ============ FOOTER — TAMNI ZAVRŠNI BLOK ============
   Podnožje ne počinje tvrdim rubom nego se stranica u njega utopi: gornjih
   stotinjak piksela je preliv iz boje stranice u tamnu masu. Ispod toga
   ide topli smeđi preliv koji se pri dnu spušta gotovo u crno, plus široki
   zlatni odsjaj iza sadržaja. Rez počinje tik iznad imena kuće. */
.site-footer {
  position: relative;
  margin-top: var(--section-y);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  /* Rub je oštar; preliv je UNUTAR podnožja — smeđa se spušta kroz četiri
     tona do gotovo crne na dnu, uz široki zlatni odsjaj iza sadržaja. */
  background:
    radial-gradient(85% 60% at 50% 8%, rgba(var(--zlato-rgb), 0.18) 0%, rgba(var(--zlato-rgb), 0) 62%),
    var(--gradijent-smedji);
  color: rgba(var(--cream-rgb), 0.78);
  overflow: hidden;
}
/* Zlatna nit označava rez na vrhu. */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(var(--zlato-rgb), 0.6) 50%, transparent);
}

/* ============ PODNOŽJE UNUTAR ZAVRŠNOG BLOKA ============
   Na početnoj podnožje dijeli podlogu sa kontaktom, pa gubi četiri stvari:
   razmak iznad sebe (otud je dolazio pojas krema koji je razdvajao dvije
   tamne površine), vlastiti preliv, vlastito zatamnjenje, i zlatnu nit na
   vrhu. Spoj se ne smije vidjeti — u tome je cijela poenta.

   Podnožje je ovdje potpuno PROVIDNO. Sve što ga zatamnjuje dolazi iz
   zajedničkog vela na .finale, pa se šum kroz njega nastavlja iz kontakta
   bez ijedne ivice. */
.finale[data-velaris] .site-footer {
  margin-top: 0;
  background: none;
}
.finale[data-velaris] .site-footer::before { display: none; }
.site-footer > * { position: relative; z-index: 1; }

.site-footer .footer-brand { color: var(--cream); }
.site-footer .footer-about { color: rgba(var(--cream-rgb), 0.62); }
.site-footer .footer-col h4 { color: rgba(var(--cream-rgb), 0.62); }
.site-footer .footer-col a { color: rgba(var(--cream-rgb), 0.78); }
.site-footer .footer-col a:hover { color: var(--cream); }
.site-footer .footer-info dt { color: rgba(var(--cream-rgb), 0.6); }
.site-footer .footer-info dd { color: rgba(var(--cream-rgb), 0.82); }
.site-footer .footer-info a { text-decoration-color: rgba(var(--cream-rgb), 0.3); }
.site-footer .socials__link {
  color: rgba(var(--cream-rgb), 0.85);
  border-color: rgba(var(--cream-rgb), 0.28);
}
.site-footer .socials__link:hover {
  border-color: var(--cream);
  background: rgba(var(--cream-rgb), 0.08);
}
.site-footer .footer-bottom {
  /* 0.62, ne manje: na espressu je tek toliko dovoljno za 4.5:1. */
  color: rgba(var(--cream-rgb), 0.62);
  border-top-color: rgba(var(--cream-rgb), 0.12);
}
.site-footer .footer-bottom a { text-decoration-color: rgba(var(--cream-rgb), 0.25); }
.site-footer .footer-bottom a:hover { color: var(--cream); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.footer-brand { font-family: var(--font-brand); font-size: 1.9rem; letter-spacing: 0.28em; text-indent: 0.28em; }
.footer-about { margin-top: 1.2rem; max-width: 34ch; color: var(--espresso-55); font-size: var(--fs-sm); }
.footer-col h4 {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--camel-tekst);
  margin-bottom: 1.1rem;
}
.footer-col li + li { margin-top: 0.15rem; }
.footer-col a {
  display: inline-block;
  padding-block: 0.4rem;      /* dodirna meta, ne samo visina slova */
  font-size: var(--fs-sm);
  color: var(--espresso-70);
  transition: color var(--t-fast) var(--ease);
}
.footer-col a:hover { color: var(--espresso); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.6rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  color: var(--espresso-40);
  letter-spacing: 0.04em;
}
/* Adresa i telefon u podnožju se na telefonu pozivaju dodirom — trebaju metu. */
.footer-bottom a {
  display: inline-block;
  padding-block: 0.5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.footer-bottom a:hover { color: var(--espresso); text-decoration-color: currentColor; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   14 KARTICA ARTIKLA + SKELETON
   ========================================================================== */
/* Na telefonu idu DVIJE kartice u red — jedna po redu tjera na beskrajno
   skrolanje i kupac ne dobije pregled ponude. Ispod 380px se vraća na jednu
   jer dvije postanu preuske za naziv i cijenu. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.4vw, 2.2rem) clamp(0.7rem, 1.8vw, 1.6rem);
}
@media (min-width: 700px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
}
/* Tek ispod 330px dvije kartice postanu preuske. iPhone SE (375) i Android
   od 360px moraju dobiti dvije, kako je i traženo. */
@media (max-width: 329px) {
  .product-grid { grid-template-columns: 1fr; }
}

.card { position: relative; display: grid; gap: 0.95rem; }
.card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--sand);
  border-radius: var(--r);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), opacity var(--t) var(--ease);
}
.card:hover .card__media img { transform: scale(1.045); }

/* Uvučeni okvir koji se pojavi na hover — isti prošiv kao na dugmadima,
   pa se kartica ne "diže" nego se uokviri. */
.card__media::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(var(--cream-rgb), 0.55);
  border-radius: 1px;
  opacity: 0;
  transform: scale(1.015);
  pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  z-index: 1;
}
.card:hover .card__media::after { opacity: 1; transform: scale(1); }

.card__flag {
  position: absolute;
  z-index: 2;
  top: 0.85rem; left: 0.85rem;
  padding: 0.4rem 0.75rem;
  background: rgba(var(--cream-rgb), 0.9);
  backdrop-filter: blur(6px);
  color: var(--espresso);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  border-radius: var(--r);
}
.card__flag--low { background: var(--espresso); color: var(--cream); }

/* Brza radnja klizi odozdo na hover, na dodirnim ekranima je uvijek vidljiva */
.card__quick {
  position: absolute;
  left: 0.6rem; right: 0.6rem; bottom: 0.6rem;
  padding: 0.8rem;
  background: rgba(var(--paper-rgb), 0.96);
  backdrop-filter: blur(6px);
  border-radius: var(--r);
  color: var(--espresso);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  text-align: center;
  transform: translateY(calc(100% + 0.6rem));
  opacity: 0;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease), background var(--t-fast) var(--ease);
}
.card:hover .card__quick,
.card__quick:focus-visible { transform: translateY(0); opacity: 1; }
.card__quick:hover { background: var(--espresso); color: var(--cream); }
@media (hover: none) {
  .card__quick { transform: translateY(0); opacity: 1; }
}

/* Info blok kartice sjedi na vlastitoj hairline — red umjesto plutanja. */
.card__info {
  display: grid;
  gap: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
}
.card__cat { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--camel-tekst); }

/* Naziv ide u Jost, ne u Bodoni.
   Bodoni je didone: tanki potezi su na naslovu od 3rem karakter, a na nazivu
   artikla od 1rem su rupe u slovima. U mreži gdje kupac pretražuje očima to
   je najgore moguće mjesto za ukrasno pismo. Pravilo je jednostavno: veliko
   ide u Bodoni, radno u Jost. Zato vitrina na početnoj ostaje didone — tamo
   su tri naziva na 1.85rem — a mreža prodavnice ne. */
.card__name {
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.005em;
  /* Dva reda: treći bi razvukao kartice u redu na različite visine. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__name a { transition: color var(--t-fast) var(--ease); }
.card:hover .card__name a { color: var(--camel-tekst); }

/* Cijena je broj zbog kojeg kupac i gleda mrežu, pa dobija vlastiti red
   odvojen linijom, najveći stupanj u kartici i tabularne brojke — u koloni
   se cifre poklope jedna ispod druge i cijene se mogu porediti pogledom,
   bez čitanja. Valuta je namjerno manja i prigušena: ona se ponavlja na
   svakoj kartici i ne nosi nikakvu informaciju. */
.card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.15rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line-soft);
}
.card__price {
  font-family: var(--font-body);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--zlato-duboko);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card__price i {
  margin-left: 0.28em;
  font-size: 0.66em;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--camel-tekst);
}
.card__boja {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso-55);
  text-align: right;
}

/* Sitnija tipografija kartice na uskim ekranima, da dvije stanu bez lomljenja.
   Ovaj blok MORA stajati iza osnovnih pravila kartice. Ranije je bio na vrhu
   sekcije i, pri istoj specifičnosti, gubio od njih — mreža je na telefonu
   vukla pune desktop stupnjeve. */
@media (max-width: 699px) {
  .card__name { font-size: 0.95rem; line-height: 1.3; }
  /* Cijena se NE smanjuje koliko i ostalo — kartica je uža, pa joj razlika u
     stupnju treba više, ne manje. */
  .card__price { font-size: 1.12rem; }
  .card__cat { font-size: 0.55rem; letter-spacing: 0.14em; }
  .card__boja { font-size: 0.55rem; letter-spacing: 0.1em; }
  .card__flag { top: 0.5rem; left: 0.5rem; padding: 0.3rem 0.5rem; font-size: 0.5rem; }
  .card__quick { padding: 0.6rem 0.4rem; font-size: 0.58rem; letter-spacing: 0.06em; }
}
/* Ispod 380px boja i cijena se u istom redu sudare. Boja odlazi — stoji na
   stranici artikla, a cijena je ono zbog čega se mreža uopšte gleda. */
@media (max-width: 379px) {
  .card__boja { display: none; }
}

/* — skeleton — */
.skeleton { position: relative; overflow: hidden; background: var(--sand); border-radius: var(--r); }
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(var(--paper-rgb), 0.8), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.sk-card { display: grid; gap: 0.95rem; }
.sk-card__media { aspect-ratio: 4 / 5; }
.sk-line { height: 12px; }
.sk-line--sm { width: 40%; height: 9px; }
.sk-line--md { width: 78%; }
.sk-line--lg { width: 55%; }

.grid-empty {
  grid-column: 1 / -1;
  padding: clamp(3rem, 8vw, 6rem) 1rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  display: grid;
  gap: 1.1rem;
  justify-items: center;
}

/* ==========================================================================
   15 STRANICA: PRODAVNICA
   ========================================================================== */
/* Zaglavlje stranice: naslov diše, ispod njega hairline koji ga odvaja od
   sadržaja. Ista mjera praznine kao na naslovnoj — stranice se ne razlikuju
   po ritmu, samo po sadržaju. */
.page-head {
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(1.8rem, 3.5vw, 3rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}
.page-head .h1 { max-width: 18ch; }
.page-head .lede { margin-top: 0.2rem; }
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem;
  margin-block: -0.35rem;
  font-size: var(--fs-xs);
  color: var(--espresso-40);
  letter-spacing: 0.05em;
}
.crumbs a { display: inline-block; padding-block: 0.35rem; }
.crumbs a:hover { color: var(--espresso); }
.crumbs span::after { content: "/"; margin-left: 0.5rem; color: var(--line); }

.shop-layout {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: start;
}
.filters { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.9rem; }
.filters__group { display: grid; gap: 0.6rem; }
.filters__title {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--camel-tekst);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-soft);
}
.filter-link {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0 0.5rem 0.9rem;
  font-size: 0.95rem;
  color: var(--espresso-70);
  transition: color var(--t-fast) var(--ease);
}
/* Aktivna stavka se ne označava crticom u tekstu — ona pomjera cijeli red pri
   svakoj promjeni. Umjesto toga uspravna linija uz rub, kao kartica registra. */
.filter-link::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 0;
  background: var(--camel);
  transform: translateY(-50%);
  transition: height var(--t) var(--ease), background var(--t) var(--ease);
}
.filter-link:hover { color: var(--espresso); }
.filter-link:hover::before { height: 44%; }
.filter-link.is-active { color: var(--espresso); font-weight: 500; }
.filter-link.is-active::before { height: 76%; background: var(--espresso); }
.filter-link em { font-style: normal; font-size: var(--fs-xs); color: var(--espresso-40); }

.shop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  padding-bottom: 1.4rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line);
}
.shop-bar__count { font-size: var(--fs-xs); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--espresso-55); }
.shop-bar__right { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

.select {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.select select {
  appearance: none;
  padding: 0.7rem 2.4rem 0.7rem 1rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.select select:hover { border-color: var(--camel-tekst); }
.select::after {
  content: "";
  position: absolute;
  right: 1rem;
  width: 6px; height: 6px;
  border-right: 1px solid var(--espresso);
  border-bottom: 1px solid var(--espresso);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.search-field { position: relative; display: flex; align-items: center; }
.search-field input {
  width: 100%;
  padding: 0.7rem 1rem 0.7rem 2.5rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--t-fast) var(--ease);
}
.search-field input::placeholder { color: var(--espresso-40); }
.search-field input:focus { border-color: var(--espresso); outline: none; }
.search-field svg {
  position: absolute;
  left: 0.85rem;
  width: 16px; height: 16px;
  stroke: var(--espresso-40);
  fill: none;
  stroke-width: 1.5;
  pointer-events: none;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--espresso); }
.chip b { font-weight: 500; }

.filters-toggle { display: none; }
@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters {
    position: static;
    display: none;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--paper);
  }
  .filters.is-open { display: grid; }
  .filters-toggle { display: inline-flex; }
}

/* ==========================================================================
   16 STRANICA: ARTIKAL
   ========================================================================== */
.pdp {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.pdp__media { display: grid; gap: 0.7rem; }
.pdp__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
  border-radius: var(--r);
  cursor: zoom-in;
}
.pdp__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.pdp__figure.is-zoomed img { transform: scale(1.7); cursor: zoom-out; }

.pdp__detail { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; gap: 1.4rem; }
.pdp__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
/* Cijena stoji u vlastitom redu između dvije hairline — kupac je traži prvo
   i ne smije je gubiti u tekstu. */
.pdp__price {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  letter-spacing: 0.02em;
  padding-block: 1.1rem;
  border-block: 1px solid var(--line);
}
.pdp__desc {
  color: var(--espresso-70);
  max-width: 52ch;
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.75;
}

.sizes { display: grid; gap: 0.8rem; }
.sizes__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sizes__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.size {
  position: relative;
  min-width: 58px;
  padding: 0.82rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
/* Ista ispuna slijeva kao na dugmadima — jedan jezik kroz cijeli sajt. */
.size::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--espresso);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
}
.size:hover { border-color: var(--espresso); }
.size.is-selected { border-color: var(--espresso); color: var(--cream); }
.size.is-selected::before { transform: scaleX(1); }

.spec { border-top: 1px solid var(--line); }
.spec__row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.spec__row dt { color: var(--espresso-40); letter-spacing: 0.04em; }
.spec__row dd { margin: 0; text-align: right; }

@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__detail { position: static; }
}

/* ==========================================================================
   17 KORPA (DRAWER)
   ========================================================================== */
.cart {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 96;
  width: min(460px, 100%);
  background: var(--paper);
  transform: translateX(100%);
  transition: transform 0.55s var(--ease);
  display: flex;
  flex-direction: column;
}
.cart.is-open { transform: translateX(0); }
.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem var(--gutter);
  border-bottom: 1px solid var(--line-soft);
}
.cart__title { font-family: var(--font-display); font-size: 1.5rem; }
.cart__body { flex: 1; overflow-y: auto; padding: 0.5rem var(--gutter); overscroll-behavior: contain; }
.cart__foot { padding: 1.35rem var(--gutter); border-top: 1px solid var(--line); display: grid; gap: 1rem; }
.cart__total { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-display); font-size: 1.3rem; }
.cart__note { font-size: var(--fs-xs); color: var(--espresso-40); text-align: center; }

.cart-line { display: grid; grid-template-columns: 76px 1fr auto; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-soft); }
.cart-line__img { aspect-ratio: 4 / 5; object-fit: cover; background: var(--sand); border-radius: var(--r); }
.cart-line__name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; }
.cart-line__meta { font-size: var(--fs-xs); color: var(--espresso-40); margin-top: 0.25rem; letter-spacing: 0.04em; }
.cart-line__price { font-family: var(--font-display); }
.qty { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.6rem; border: 1px solid var(--line); border-radius: var(--r); }
.qty button { width: 28px; height: 28px; display: grid; place-items: center; font-size: 1rem; line-height: 1; transition: background var(--t-fast) var(--ease); }
.qty button:hover { background: var(--camel-14); }
.qty span { min-width: 22px; text-align: center; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.cart-line__remove { align-self: start; font-size: var(--fs-xs); color: var(--espresso-40); text-decoration: underline; text-underline-offset: 3px; }
.cart-line__remove:hover { color: var(--espresso); }

.cart-empty { display: grid; gap: 1.2rem; justify-items: center; text-align: center; padding: clamp(3rem, 10vh, 6rem) 1rem; }

/* ==========================================================================
   18 ADMIN PANEL
   ========================================================================== */
.admin { padding-block: clamp(2rem, 4vw, 3.5rem) var(--section-y); }

.admin-gate { display: grid; place-items: center; min-height: 62vh; padding-block: 3rem; }
.admin-gate__card {
  width: min(430px, 100%);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  display: grid;
  gap: 1.2rem;
  box-shadow: var(--shadow-sm);
}

.admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--line);
}
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 1.8rem; }
.admin-stat { background: var(--paper); padding: 1.2rem 1.35rem; }
.admin-stat__n { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; }
.admin-stat__l { margin-top: 0.4rem; font-size: var(--fs-xs); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--espresso-55); }

.admin-toolbar { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-bottom: 1.4rem; }
.admin-toolbar .search-field { flex: 1 1 260px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
table.inv { width: 100%; border-collapse: collapse; min-width: 760px; }
table.inv th, table.inv td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.inv th {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--camel-tekst);
  font-weight: 500;
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 1;
}
table.inv tbody tr { transition: background var(--t-fast) var(--ease); }
table.inv tbody tr:hover { background: var(--camel-14); }
table.inv tbody tr:last-child td { border-bottom: 0; }
.inv__thumb { width: 46px; height: 58px; object-fit: cover; border-radius: var(--r); background: var(--sand); }
.inv__name { font-family: var(--font-display); font-size: 1.05rem; }
.inv__actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.inv__price { font-variant-numeric: tabular-nums; white-space: nowrap; }

.pill {
  display: inline-block;
  padding: 0.24rem 0.6rem;
  border-radius: 100px;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  background: var(--sand);
  color: var(--espresso-70);
  white-space: nowrap;
}
.pill--warn { background: var(--espresso); color: var(--cream); }
.pill--ok { background: var(--camel-30); }

/* Inventar na telefonu: tabela sa horizontalnim skrolom je neupotrebljiva
   palcem, pa se svaki red pretvara u karticu. Zaglavlje nestaje, a nazive
   kolona nose sami redovi preko data-oznaka. */
@media (max-width: 760px) {
  .table-wrap { border: 0; background: transparent; overflow: visible; }
  table.inv { min-width: 0; }
  table.inv thead { display: none; }
  table.inv, table.inv tbody, table.inv tr, table.inv td { display: block; width: 100%; }
  table.inv tr {
    margin-bottom: 0.8rem;
    padding: 1rem 1.1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
  }
  table.inv tbody tr:hover { background: var(--paper); }
  table.inv td { padding: 0.35rem 0; border: 0; }
  table.inv td:first-child { padding-top: 0; }
  table.inv td[data-oznaka]::before {
    content: attr(data-oznaka);
    display: block;
    margin-bottom: 0.15rem;
    font-size: var(--fs-xs);
    letter-spacing: var(--track-ui);
    text-transform: uppercase;
    color: var(--camel-tekst);
  }
  .inv__actions { justify-content: stretch; margin-top: 0.6rem; }
  .inv__actions .btn { flex: 1; }
  .inv__thumb { width: 60px; height: 75px; }
}

/* — kartice sekcija admin panela — */
.admin-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.2rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--espresso-55);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.admin-tab:hover { color: var(--espresso); }
.admin-tab.is-active { color: var(--espresso); border-bottom-color: var(--espresso); }
.admin-tab__broj {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--espresso);
  color: var(--cream);
  font-size: 0.66rem;
  line-height: 18px;
}

/* — popis narudžbi — */
.narudzbe-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0.8rem;
}
.narudzba {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: left;
  transition: border-color var(--t-fast) var(--ease), transform var(--t) var(--ease);
}
.narudzba:hover { border-color: var(--espresso); transform: translateY(-2px); }
.narudzba__glava { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.narudzba__broj {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  color: var(--camel-tekst);
}
.narudzba__ime { font-family: var(--font-display); font-size: 1.2rem; }
.narudzba__meta { font-size: var(--fs-xs); color: var(--espresso-55); line-height: 1.5; }
.narudzba__iznos { font-family: var(--font-display); font-size: 1.1rem; margin-top: 0.3rem; }

/* Status nosi boju: nova mora upasti u oko, otkazana ne smije. */
.pill--nova { background: var(--espresso); color: var(--cream); }
.pill--potvrdjena { background: var(--camel-30); }
.pill--poslana { background: var(--sand); }
.pill--isporucena { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.pill--otkazana { background: transparent; color: var(--espresso-40); box-shadow: inset 0 0 0 1px var(--line); }

.narudzba-podaci { display: grid; gap: 0.5rem; margin-bottom: 1.2rem; }
.narudzba-podaci > div {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.narudzba-podaci dt { min-width: 9rem; color: var(--espresso-40); }
.narudzba-podaci dd { margin: 0; }
.narudzba-podaci a { text-decoration: underline; text-underline-offset: 3px; }

.modal__foot--narudzba { justify-content: flex-start; align-items: center; }
.modal__foot--narudzba .select { margin-right: auto; }
@media (max-width: 560px) {
  .modal__foot--narudzba { display: grid; }
  .modal__foot--narudzba .select { margin-right: 0; }
  .modal__foot--narudzba .select select { width: 100%; }
}

.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--espresso-55);
}
.mode-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--camel); }
.mode-badge--server i { background: var(--espresso); }

/* — birač slike artikla — */
.upload {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 1rem;
  align-items: start;
}
.upload__preview {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.upload__preview img { width: 100%; height: 100%; object-fit: cover; }
.upload__prazno {
  padding: 0.5rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--espresso-55);
  text-align: center;
}
.upload__desno { display: grid; gap: 0.7rem; }
.upload__akcije { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.upload__hint { font-size: var(--fs-xs); line-height: 1.5; color: var(--espresso-55); }
.upload__hint--greska { color: var(--espresso); font-weight: 500; }
.upload.is-busy .upload__preview { opacity: 0.55; }

/* Na telefonu dugmad idu punom širinom — palcem se lakše pogađa. */
@media (max-width: 520px) {
  .upload { grid-template-columns: 76px 1fr; gap: 0.8rem; }
  .upload__akcije .btn { flex: 1 1 100%; }
}

.notice {
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--camel);
  border-radius: var(--r);
  background: var(--paper);
  font-size: var(--fs-sm);
  color: var(--espresso-70);
  margin-bottom: 1.6rem;
}
.notice b { color: var(--espresso); font-weight: 500; }

/* ==========================================================================
   19 MODALI, TOAST, FORME
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}
.modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(var(--espresso-rgb),0.45); backdrop-filter: blur(3px); }
.modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(18px) scale(0.985);
  transition: transform var(--t) var(--ease);
}
.modal.is-open .modal__panel { transform: none; }
.modal__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem clamp(1.25rem, 3vw, 2rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.modal__title { font-family: var(--font-display); font-size: 1.45rem; }
.modal__body { padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.1rem; }
.modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: flex-end;
  padding: 1.1rem clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
}

.close-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; transition: background var(--t-fast) var(--ease); }
.close-btn:hover { background: var(--camel-14); }
.close-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; fill: none; }

/* — forme — */
.field { display: grid; gap: 0.45rem; }
.field > label {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--espresso-55);
}
/* Skriveno polje mora ostati skriveno i unutar .field — inače mu pravilo
   ispod da punu širinu i padding, pa nevidljivo polje razvuče stranicu. */
input.sr-only, select.sr-only, textarea.sr-only,
.field input.sr-only, .field select.sr-only, .field textarea.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--espresso);
  background: var(--paper);
  outline: none;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--espresso); background: var(--camel-14); }
.field__hint { font-size: var(--fs-xs); color: var(--espresso-40); }
.field__error { font-size: var(--fs-xs); color: var(--espresso); font-weight: 500; }
.field__error:empty { display: none; }
/* Kvačica: sistemska je oko 13px, presitna za prst. Cijeli red je klikabilan. */
.field-check {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 44px;
  cursor: pointer;
}
.field-check input[type="checkbox"] {
  flex: none;
  width: 22px; height: 22px;
  accent-color: var(--espresso);
  cursor: pointer;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   19b NARUDŽBA (checkout)
   ========================================================================== */
.checkout-sazetak {
  padding: 1.1rem 1.2rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.checkout-sazetak__naslov {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--camel-tekst);
  margin-bottom: 0.8rem;
}
.checkout-lista { display: grid; gap: 0.5rem; }
.checkout-lista li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-sm);
}
.checkout-lista em { font-style: normal; color: var(--espresso-55); }
.checkout-lista b { font-weight: 500; }
.checkout-ukupno {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.2rem;
}

/* Plaćanje pouzećem je jedini način plaćanja — mora se vidjeti prije nego
   kupac počne kucati podatke, ne poslije. */
.notice--placanje { margin-bottom: 0; border-left-color: var(--espresso); }

.modal__foot--checkout { display: grid; gap: 0.8rem; justify-items: stretch; }
.checkout-uputa { font-size: var(--fs-xs); color: var(--espresso-55); line-height: 1.5; }
.checkout-akcije { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.checkout-akcije .btn { flex: 1 1 auto; }
.checkout-akcije .btn:first-child { flex: 1 1 100%; }
.checkout-messenger { font-size: var(--fs-xs); color: var(--espresso-55); line-height: 1.5; }
.checkout-messenger a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 520px) {
  .checkout-akcije .btn { flex: 1 1 100%; }
}

/* — ekran nakon narudžbe — */
.checkout-uspjeh { text-align: center; }
.uspjeh-znak {
  width: 62px; height: 62px;
  margin: 0 auto 1.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--espresso);
}
.uspjeh-znak svg {
  width: 28px; height: 28px;
  stroke: var(--cream);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.uspjeh-naslov {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.1;
}
.uspjeh-broj { margin-top: 0.9rem; font-size: var(--fs-sm); line-height: 1.6; }
.uspjeh-broj b { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.04em; }
.uspjeh-tekst {
  max-width: 44ch;
  margin: 1.1rem auto 0;
  color: var(--espresso-70);
  line-height: 1.65;
}
.uspjeh-kanali { display: grid; gap: 0.6rem; margin-top: 1.6rem; }
.uspjeh-messenger {
  margin-top: 0.9rem;
  font-size: var(--fs-xs);
  color: var(--espresso-55);
  line-height: 1.55;
}
.uspjeh-messenger a { text-decoration: underline; text-underline-offset: 3px; }
.uspjeh-sazetak {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  text-align: left;
}
.uspjeh-podaci { display: grid; gap: 0.45rem; margin-top: 1.2rem; }
.uspjeh-podaci > div { display: flex; gap: 0.8rem; flex-wrap: wrap; font-size: var(--fs-sm); }
.uspjeh-podaci dt { min-width: 8.5rem; color: var(--espresso-40); }
.uspjeh-podaci dd { margin: 0; }

.toast-stack {
  position: fixed;
  left: 50%;
  bottom: 1.75rem;
  z-index: 200;
  transform: translateX(-50%);
  display: grid;
  gap: 0.6rem;
  width: min(420px, calc(100% - 2rem));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 1.2rem;
  background: var(--espresso);
  color: var(--cream);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  animation: toast-in 0.45s var(--ease) forwards;
}
.toast.is-out { animation: toast-out 0.35s var(--ease-io) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ==========================================================================
   19c ZLATNI DETALJI I PRELIVI
   Zlato nosi samo tačke na koje pogled treba pasti. Sve ostalo ostaje smeđe.
   ========================================================================== */

/* Etiketa sekcije dobija zlatnu unutrašnju liniju umjesto kamel dashed. */
.tag::after { border-color: rgba(var(--zlato-rgb), 0.42); }
.section--toplo .tag::after,
.banner .tag::after,
.vitrina .tag::after { border-color: rgba(var(--zlato-rgb), 0.5); }

/* Romb u pokretnoj traci. */
.marquee__group i { background: var(--zlato); }
.step__n { -webkit-text-stroke-color: var(--zlato); }

/* Tamni blok dobija topli preliv iz iste skale kao podnožje i zlatnu nit na
   vrhu. Traka je izuzeta: na 32px visine okomiti preliv izgleda kao greška u
   ispisu — ona je puna boja, jedan potez između dvije sekcije. */
.news {
  position: relative;
  background-image: var(--gradijent-smedji);
}
.marquee { background: var(--brown-700); }
.marquee::before { background: linear-gradient(90deg, var(--brown-700), transparent); }
.marquee::after { background: linear-gradient(270deg, var(--brown-700), transparent); }
.marquee::before,
.marquee::after { z-index: 2; }
.news::before,
.marquee-nit::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(var(--zlato-rgb), 0.65) 50%, transparent);
}
.news { overflow: hidden; }

/* Zlatna nit gore i dolje zatvara topli blok. Ide kao sjena, ne kao
   pseudo-element — oni su ovdje zauzeti platnom i velom. */
.section--toplo {
  box-shadow: inset 0 1px 0 rgba(var(--zlato-rgb), 0.45),
              inset 0 -1px 0 rgba(var(--zlato-rgb), 0.45);
}


/* Cijena artikla u zlatu — jedini broj koji kupac traži prvi.
   Duboka nijansa, ne svijetla: na cream podlozi svjetlije zlato pada na 3.9:1. */
.pdp__price { color: var(--zlato-duboko); }

/* ==========================================================================
   20 SCROLL REVEAL / REDUCED MOTION / PRINT
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.09s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.18s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.27s; }

/* Stepenasti ulazak kartica u mreži. Kašnjenje postavlja JS (broj kartica
   nije poznat unaprijed), a sam potez je ovdje. */
.je-stepenovan {
  opacity: 0;
  transform: translateY(18px);
  animation: karticaUlazi 0.8s var(--ease) forwards;
  animation-delay: var(--kasnjenje, 0ms);
}
@keyframes karticaUlazi { to { opacity: 1; transform: none; } }

/* — dodatna kretnja —
   Naslovi u zaglavljima sekcija se ne pojave odjednom nego iskliznu ispod
   svoje linije, kao da su bili sakriveni iza nje. */
[data-reveal] .h2,
[data-reveal] .h1 {
  display: inline-block;
  clip-path: inset(0 0 110% 0);
  transform: translateY(0.22em);
  transition: clip-path 1s var(--ease) 0.05s, transform 1s var(--ease) 0.05s;
}
[data-reveal].is-in .h2,
[data-reveal].is-in .h1 { clip-path: inset(-25% -10% -25% -10%); transform: none; }

/* Etiketa sekcije se raširi iz lijeve ivice. */
[data-reveal] .tag {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--ease);
}
[data-reveal].is-in .tag { clip-path: inset(0 0 0 0); }

/* Hairline ispod zaglavlja se ispisuje. */
.section-head { position: relative; }
.section-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--espresso);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease) 0.2s;
}
.section-head[data-reveal].is-in::after { transform: scaleX(1); }
.section--toplo .section-head::after { background: rgba(var(--cream-rgb), 0.5); }

/* Slike u priči dišu pri ulasku. */
[data-reveal].story__media img {
  transform: scale(1.06);
  transition: transform 1.6s var(--ease);
}
[data-reveal].story__media.is-in img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] .h1, [data-reveal] .h2, [data-reveal] .tag {
    clip-path: none !important;
    transform: none !important;
  }
  .section-head::after { transform: scaleX(1) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .je-stepenovan { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   21 MOBILNI DETALJI
   ========================================================================== */

/* iOS zumira stranicu čim se fokusira polje manje od 16px. Zbog toga svako
   polje za unos na telefonu ide na tačno 16px — zumiranje je najgrublji
   mogući prekid unosa. */
@media (max-width: 860px) {
  input, select, textarea {
    font-size: 16px;
  }
  .field input, .field select, .field textarea,
  .search-field input, .news__form input { font-size: 16px; }
}

/* Telefoni sa zarezom i gestikulacionom trakom: sadržaj ne smije ići pod
   sistemske elemente. */
@supports (padding: env(safe-area-inset-bottom)) {
  .drawer-nav__body,
  .cart__foot {
    padding-bottom: calc(1.35rem + env(safe-area-inset-bottom));
  }
  .footer-bottom { padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)); }
  .toast-stack { bottom: calc(1.75rem + env(safe-area-inset-bottom)); }
  .drawer-nav, .cart {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Drawer i korpa moraju pratiti stvarnu visinu prozora — adresna traka na
   telefonu se skriva i pojavljuje, pa 100vh zna biti previsok. */
@supports (height: 100dvh) {
  .drawer-nav, .cart { height: 100dvh; }
}

/* Slajder i izlog se na dodir prevlače — bez ovoga preglednik pokušava
   izabrati tekst umjesto da prati prst. */
.banner { -webkit-user-select: none; user-select: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__curtain { transform: none; }
  .hero__uvod { opacity: 1; transform: none; }
  .banner__slide .banner__copy-inner > * { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .cart, .drawer-nav, .scrim, .banner__nav { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   20 VIŠE FOTOGRAFIJA PO ARTIKLU
   ========================================================================== */
/* — sličice na stranici artikla — */
/* Flex, ne grid sa auto-fill: kod dvije fotografije mreza je razvlacila
   praznine preko cijele sirine i traka je izgledala kao da nesto fali.
   Ovako slicice zadrze velicinu i stoje uz lijevu ivicu. */
.pdp__slicice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.pdp__slicica {
  position: relative;
  display: block;
  flex: none;
  width: clamp(56px, 7vw, 76px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
  border: 1px solid var(--line);
  cursor: pointer;
}
.pdp__slicica img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Neizabrane su prigušene, pa se aktivna vidi bez ijednog okvira. */
  filter: brightness(0.72) saturate(0.85);
  transition: filter var(--t) var(--ease);
}
.pdp__slicica:hover img,
.pdp__slicica:focus-visible img { filter: brightness(0.9); }
.pdp__slicica.je-aktivna img { filter: none; }
.pdp__slicica.je-aktivna::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--espresso);
}

/* — unos fotografija u admin panelu — */
/* Kad su fotografije niz, a ne jedna, .upload gubi dvokolonski raspored:
   traka slicica ide preko cijele sirine iznad dugmadi. U koloni od 92px,
   koliko je bilo dovoljno za jednu sliku, slicice bi stale jedna ispod
   druge i forma bi se razvukla u nedogled. */
.upload:has(.slike-unos) {
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.slike-unos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.5rem;
  align-content: start;
}
.slike-unos .upload__prazno { grid-column: 1 / -1; }
.slike-unos__stavka {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
  border: 1px solid var(--line);
}
.slike-unos__stavka.je-glavna { border-color: var(--espresso); }
.slike-unos__stavka img { width: 100%; height: 100%; object-fit: cover; }
.slike-unos__stavka figcaption {
  position: absolute;
  top: 0; left: 0;
  padding: 0.2rem 0.4rem;
  background: var(--espresso);
  color: var(--cream);
  font-size: 0.55rem;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}
/* Radnje stoje UVIJEK, ne na hover: admin se koristi i sa telefona, gdje
   hover ne postoji, a ovo su jedina dugmad kojima se mijenja redoslijed. */
.slike-unos__radnje {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: rgba(var(--espresso-rgb), 0.82);
}
.slike-unos__radnje button {
  flex: 1;
  min-height: 26px;
  color: var(--cream);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.slike-unos__radnje button:hover:not(:disabled) { background: rgba(var(--cream-rgb), 0.22); }
.slike-unos__radnje button:disabled { opacity: 0.3; cursor: default; }
.slike-unos__radnje [data-slika-obrisi]:hover { background: rgba(180, 60, 40, 0.55); }

@media (max-width: 700px) {
  .slike-unos { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .slike-unos__radnje button { min-height: 32px; }
}

/* `hidden` na dugmetu kartice ne radi sam od sebe: .admin-tab postavlja
   display, a to nadjačava UA pravilo za [hidden]. */
.admin-tab[hidden] { display: none; }