.hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; }
.hero-slajd {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .8s cubic-bezier(.77, 0, .175, 1);
}
.hero-slajd.aktivan { opacity: 1; }
.hero-slajd img { width: 100%; height: 100%; object-fit: cover; }

@keyframes hero-kb { from { transform: scale(1); } to { transform: scale(1.1); } }
.hero-slajd.aktivan img, .hero-slajd.izlazi img { animation: hero-kb 10s linear .3s both; }
.hero-slajd.staticna img { animation: none; }

.hero-slajd::after {
  content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .2);
}
.hero-sadrzaj {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1.7708vw; padding-top: 1.25vw;
}
.hero-naslov {
  font-family: 'Times New Roman', Times, serif;
  font-size: 4.1667vw; font-weight: 700; letter-spacing: -.0521vw;
  color: #fff; margin: 0; line-height: 1.1;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.hero-dugme {
  background: var(--akcenat); color: #fff; border: 0;
  font-family: var(--font-naslov); font-size: 13px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  height: 56px; padding: 0 60px; display: inline-flex; align-items: center;
  transition: background-color var(--prelaz);
}
.hero-dugme:hover { background: var(--akcenat-hover); }

.hero-strelica {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.3); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--prelaz);
}
.hero-strelica:hover { background: rgba(255,255,255,.5); }
.hero-strelica.levo  { left: 70px; }
.hero-strelica.desno { right: 70px; }
.hero-strelica svg { width: 18px; height: 18px; }

.hero-tacke { position: absolute; left: 0; right: 0; bottom: 60px; z-index: 3;
  display: flex; justify-content: center; gap: 30px; }
.hero-tacke button {
  width: 10px; height: 10px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: #F7F6F4; transition: background-color var(--prelaz);
}
.hero-tacke button.aktivna { background: var(--dugme); }

.hero-sadrzaj { --ulaz-x: 40px; --ulaz-x-dugme: 30px; }

.hero-sadrzaj { --traka: .4; }
.hero-sadrzaj::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 26%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 74%);
  opacity: calc(var(--traka) / .5); transition: opacity .8s cubic-bezier(.77, 0, .175, 1);
}
.hero-naslov, .hero-dugme { position: relative; z-index: 1; }
.hero-naslov { text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.hero-naslov, .hero-dugme { opacity: 0; }
.hero-sadrzaj.vidljiv .hero-naslov, .hero-sadrzaj.vidljiv .hero-dugme { opacity: 1; transition: opacity .3s cubic-bezier(.77, 0, .175, 1); }
.hero-sadrzaj.vidljiv:not(.izlazi) .hero-naslov { animation: hero-ulaz-naslov 1s cubic-bezier(.77, 0, .175, 1) .72s both; }
.hero-sadrzaj.vidljiv:not(.izlazi) .hero-dugme { animation: hero-ulaz-dugme .4s cubic-bezier(.77, 0, .175, 1) 1.27s both; }
.hero-sadrzaj.izlazi .hero-naslov, .hero-sadrzaj.izlazi .hero-dugme { opacity: 0; }
.hero-sadrzaj.ponovo.vidljiv:not(.izlazi) .hero-naslov { animation-delay: .4s; }
.hero-sadrzaj.ponovo.vidljiv:not(.izlazi) .hero-dugme { animation-delay: .95s; }
.hero-sadrzaj.slajd-2 { transform: translateY(-1.25vw); }
@keyframes hero-ulaz-naslov { from { opacity: 0; transform: translateX(var(--ulaz-x)); } to { opacity: 1; transform: none; } }
@keyframes hero-ulaz-dugme  { from { opacity: 0; transform: translateX(var(--ulaz-x-dugme)); } to { opacity: 1; transform: none; } }
.hero-sadrzaj:not(.vidljiv) { pointer-events: none; }

.istorija { position: relative; background: var(--bg); overflow: hidden; }
.istorija .omotac { position: relative; z-index: 1; max-width: 860px; padding: 70px 20px 80px; }
.istorija h2 {
  text-align: center; color: var(--tekst-tamni);
  font-size: 47px; line-height: 50px; letter-spacing: -.9px; margin: 0 0 36px;
}
.istorija h2::after { content: ''; display: block; width: 56px; height: 3px; background: var(--crvena-1); margin: 18px auto 0; }
.istorija h3 { font-family: var(--font-naslov); font-size: 24px; line-height: 1.2; letter-spacing: -.3px; color: var(--tekst-tamni); margin: 44px 0 16px; }
.istorija p { color: #2E2521; font-weight: 400; font-size: 17px; line-height: 1.75; margin: 0 0 18px; }
.istorija blockquote { margin: 26px 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--crvena-1); font-style: italic; }
.istorija blockquote p { margin: 0; }
.istorija ul.boje { list-style: none; margin: 0 0 18px; padding: 0; }
.istorija ul.boje li { position: relative; padding-left: 26px; margin: 0 0 12px; color: #2E2521; font-size: 17px; line-height: 1.7; }
.istorija ul.boje li::before { content: ''; position: absolute; left: 0; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--boja); box-shadow: 0 0 0 2px #fff; }
.istorija ul.boje li strong { color: var(--tekst-tamni); }
.istorija-prelaz { position: relative; }
.istorija:not(.otvoreno) .istorija-prelaz::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(241, 231, 217, 0), var(--bg)); }
.istorija-dugme { text-align: center; margin: 0; }
.istorija-vise { display: none; }
.istorija.otvoreno .istorija-vise { display: block; }
.istorija.otvoreno .istorija-dugme { margin: 8px 0 0; }

.sekcija-katalog { background: var(--bg-belo); position: relative; padding: 120px 0 45px; }
.sekcija-katalog .ptica {
  position: absolute; top: 10px; right: 6%; width: 190px; opacity: .9; pointer-events: none;
}
.nadnaslov {
  font-family: var(--font-naslov); font-size: 14px; font-weight: 700;
  line-height: 18px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--tekst-tamni); text-align: center; margin: 0 0 20px;
}
.sekcija-katalog h2 {
  font-size: 47px; line-height: 50px; letter-spacing: -.9px;
  text-align: center; margin: 0 0 162px; color: var(--tekst-tamni);
}

.karusel { position: relative; overflow: hidden; }
.kartice {
  display: flex; gap: 30px;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.kartice > .kartica { flex: 0 0 calc((100% - 90px) / 4); }

.kartice > .kartica { display: flex; flex-direction: column; }
.kartice > .kartica .kartica-slika { flex: none; }
.kartice > .kartica .kartica-naslov { flex: 1 0 auto; }

.karusel-tacke { display: flex; justify-content: center; gap: 12px; margin-top: 63px; }
.karusel-tacke button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: #E2E1E0; transition: background-color var(--prelaz);
}
.karusel-tacke button.aktivna, .karusel-tacke button:hover { background: var(--akcenat); }
.kartica { display: flex; flex-direction: column; }
.kartica-slika { overflow: hidden; margin-bottom: 16.5px; aspect-ratio: 3 / 4; position: relative; }
.kartica-slika-link { display: block; height: 100%; }
.kartica-slika img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease, opacity .3s ease;
}
.kartica:hover .kartica-slika img { transform: scale(1.1); }
.kartica-kategorija {
  font-family: var(--font-naslov); font-size: 14px; font-weight: 700;
  line-height: 21px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--tekst-prigusen); margin: 0 0 13.5px;
}
.kartica-naslov {
  font-family: var(--font-naslov); font-size: 24px; font-weight: 700;
  color: var(--tekst-tamni); margin: 0; line-height: 28.8px; letter-spacing: -.24px;
}
.kartice .kartica-naslov a:hover { color: var(--tekst); }
.kartice .kartica-kategorija a:hover { color: var(--akcenat); }
.mreza-proizvoda .kartica-naslov a:hover,
.mreza-povezanih .kartica-naslov a:hover { color: var(--akcenat); }
.kartica-datum {
  font-family: var(--font-tekst); font-size: 14px; font-weight: 400;
  line-height: 21px; letter-spacing: normal;
  color: var(--tekst-prigusen); margin: 12px 0 0;
}

.foter { background: var(--tamna); color: var(--tekst-footer); padding: 33px 0 18px; letter-spacing: normal; }
.foter-kolone { padding: 0; }
.foter-mreza { display: grid; grid-template-columns: 52.424% 24.242% 22.974%; align-items: start; }
.foter-logo { padding: 0 15px; }
.foter-logo img { width: 57%; max-width: none; height: auto; display: block; }
.foter-kolona { padding: 4px 15px 0; }
.foter h3 {
  font-family: var(--font-naslov); font-size: 19px; line-height: 19px; font-weight: 700; letter-spacing: -.19px;
  color: var(--tekst-svetli); margin: 0 0 22px;
}
.foter p { font-size: 16px; line-height: 26.56px; margin: 0; }
.foter p + p { margin-top: 20px; }
.foter a:hover { color: var(--tekst-svetli); }
.foter-pinterest { display: flex; align-items: center; margin: 36px 0 0; height: 32px; }
.foter-pinterest .soc-ikona { width: 32px; height: 32px; font-size: 16px; margin-left: -8px; display: flex; align-items: center; justify-content: center; }
.foter-pinterest .soc-ikona::before { content: '\e8a7'; }
.foter-pinterest .soc-ime { font-family: var(--font-naslov); font-size: 16px; line-height: 20px; margin-left: 6px; }
.foter p.foter-dno {
  text-align: right; font-size: 16px; line-height: 28.22px; margin: 18px 0 0; letter-spacing: .1px;
  border-top: 2px solid #5A524E; padding-top: 18px;
}

.na-vrh {
  position: fixed; right: 34px; bottom: 34px; z-index: 900;
  width: 46px; height: 46px; border: 0; cursor: pointer;
  background: var(--akcenat); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s, background-color .3s, transform .3s;
}
.na-vrh.vidljiv { opacity: 1; visibility: visible; }
.na-vrh:hover { background: var(--navrh-hover); }
.na-vrh svg { width: 15px; height: 15px; }

.kursor {
  position: fixed; top: 0; left: 0; z-index: 999999; pointer-events: none;
  width: 0; height: 0;
  border-radius: 50%; background: #000;
  opacity: 0; visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transform: translate(-200px, -200px);
  transition: width .3s, height .3s, opacity .3s, background-color .3s;
}
.kursor.veliki { width: 66px; height: 66px; opacity: 1; visibility: visible; }
.kursor span {
  color: #fff; font-size: 15px; letter-spacing: 5px; opacity: 0;
  transition: opacity .3s; white-space: nowrap; padding-left: 5px;
}
.kursor.veliki span { opacity: 1; }
@media (max-width: 1279px) { .kursor { display: none; } }
html.kursor-aktivan [data-kursor], html.kursor-aktivan [data-kursor] * { cursor: none; }

.kartica-hover {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .4s ease-in-out; text-decoration: none;
  pointer-events: none;
}
.kartica-hover .ikona-krug { pointer-events: auto; }
.kartica:hover .kartica-hover { opacity: 1; transition-delay: .1s; }
.kartica--kategorija:hover .kartica-hover { transition-delay: .05s; }
.kartica-hover .ikona-krug {
  display: block; width: 47px; height: 47px; margin: 4px; border-radius: 50%;
  background: #fff; color: #000; font-size: 8px; line-height: 47px; text-align: center;
  box-shadow: 0 0 8px rgba(0, 0, 0, .08); position: relative; top: 0; transition: all .2s ease;
}
.kartica-hover .ikona-krug::before { content: '\e9df'; }
.kartica-hover:hover .ikona-krug { color: var(--akcenat); top: -4px; }

.kartice .kartica-slika img { transform: scale(1.01); transition: transform .5s ease; }
.kartice .kartica:hover .kartica-slika img { transform: scale(1.07); }

[data-anim-kartica] { visibility: hidden; }
.kartica.pojavi { visibility: visible; animation: kartica-fadeInUp .8s ease both; }
@keyframes kartica-fadeInUp {
  from { opacity: 0; transform: translate3d(0, calc(100% - var(--kartica-pb, 0px)), 0); }
  to   { opacity: 1; transform: none; }
}

[data-anim-ulaz] { visibility: hidden; }

.istorija p.ulaz-pojavi { visibility: visible; animation: ulaz-izdizanje .7s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes ulaz-izdizanje {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

.foter.foter--uzi { padding-top: 19px; }
.foter.foter--uzi h3 { margin-bottom: 16px !important; }
.foter.foter--uzi p + p { margin-top: 15px !important; }
.foter.foter--uzi .foter-pinterest { margin-top: 15px !important; }