:root {
  --pretraga-h: 500px;
  --pretraga-sirina: 1290px;
  --pretraga-vrh: 226px;
  --pretraga-fs: 32.3px;
  --pretraga-polje-h: 3em;
  --pretraga-forma-top: 55%;
}

html.pretraga-otvorena { overflow: hidden; }

.pretraga-overlay {
  position: fixed; left: 0; top: calc(-1 * var(--pretraga-h)); width: 100%; height: var(--pretraga-h);
  z-index: 100000; background: rgb(45, 29, 21); color: rgb(202, 194, 192); overflow: hidden;
  transition: top .5s cubic-bezier(.46, .03, .52, .96);
}
.pretraga.otvorena .pretraga-overlay { top: 0; }
.pretraga-zavesa { display: none; position: fixed; inset: 0; z-index: 99999; background: rgb(45, 29, 21); opacity: .2; }
.pretraga.otvorena .pretraga-zavesa { display: block; }

.pretraga-logo { position: absolute; left: 60px; top: 70px; height: 100px; width: auto; opacity: 0; z-index: 2; }
.pretraga.otvorena .pretraga-logo { animation: pretraga-fade .6s .3s both; }
.zatvori-pretragu {
  position: absolute; right: 60px; top: 60px; z-index: 2; width: 41px; height: 41px;
  display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer;
  color: rgb(248, 242, 241); font-family: 'fontello'; font-size: 24px; line-height: 1;
}
.zatvori-pretragu::before { content: '\e9e1'; display: inline-block; opacity: 0; transition: transform .3s ease, color .3s ease; }
.pretraga.otvorena .zatvori-pretragu::before { animation: pretraga-x-ulaz .6s .3s backwards; opacity: 1; }
.zatvori-pretragu:hover::before { transform: rotate(180deg); }

.pretraga-omotac { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--pretraga-sirina); height: 100%; z-index: 1; }
.pretraga-forma { position: absolute; top: var(--pretraga-forma-top); left: 50%; transform: translate(-50%, -50%); width: 100%; margin: 0; opacity: 0; }
.pretraga.otvorena .pretraga-forma { animation: pretraga-fade .7s .5s both; }
.pretraga-forma::after {
  content: ''; display: block; width: 100%; height: 1px; background: rgb(248, 242, 241);
  transform: scale3d(0, 1, 1); transform-origin: left center; opacity: 0;
}
.pretraga.otvorena .pretraga-forma::after { animation: pretraga-linija .7s .8s both; }
.pretraga-polje {
  display: block; width: 100%; height: var(--pretraga-polje-h); margin: 0; padding: 0 1.5em 0 0; border: 0; border-radius: 0;
  background: none; color: #fff; font-family: var(--font-naslov); font-size: var(--pretraga-fs); font-weight: 400; line-height: normal;
  letter-spacing: 0; outline: none; -webkit-appearance: none; appearance: none;
}
.pretraga-polje::placeholder { color: rgb(202, 194, 192); opacity: 1; }
.pretraga-polje::-webkit-search-cancel-button, .pretraga-polje::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.pretraga-dugme {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 0; cursor: pointer;
  color: rgb(248, 242, 241); font-family: 'fontello'; font-size: 24px; line-height: 1; display: flex; transition: color .3s ease;
}
.pretraga-dugme::before { content: '\e9b6'; }
.pretraga-dugme:hover { color: var(--akcenat); }

.pretraga.zatvara .pretraga-forma { animation: pretraga-fade-izlaz .6s .3s both; }
.pretraga.zatvara .pretraga-forma::after { animation: pretraga-linija-izlaz .6s .1s both; }
.pretraga.zatvara .pretraga-logo { animation: pretraga-fade-izlaz .3s .5s both; }
.pretraga.zatvara .zatvori-pretragu::before { animation: pretraga-x-izlaz .6s .5s both; }

@keyframes pretraga-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pretraga-fade-izlaz { from { opacity: 1; } to { opacity: 0; } }
@keyframes pretraga-linija { 0% { opacity: 0; transform: scale3d(0, 1, 1); } 10% { opacity: 1; transform: scale3d(.1, 1, 1); } 100% { opacity: .14; transform: scale3d(1, 1, 1); } }
@keyframes pretraga-linija-izlaz { 0% { opacity: .8; transform: scale3d(1, 1, 1); } 100% { opacity: .14; transform: scale3d(0, 1, 1); } }
@keyframes pretraga-x-ulaz { 0% { opacity: 0; transform: scale(.2) rotate(0); } 100% { opacity: 1; transform: scale(1) rotate(180deg); } }
@keyframes pretraga-x-izlaz { 0% { opacity: 1; transform: scale(1) rotate(180deg); } 100% { opacity: 0; transform: scale(.2) rotate(0); } }

.pretraga.sa-rezultatima .pretraga-overlay { height: auto; min-height: var(--pretraga-h); max-height: 100vh; overflow-y: auto; }
.pretraga.sa-rezultatima .pretraga-omotac { position: static; transform: none; height: auto; margin: 0 auto; padding: var(--pretraga-vrh) 0 40px; }
.pretraga.sa-rezultatima .pretraga-forma { position: relative; top: auto; left: auto; transform: none; }
.pretraga-rezultati { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; }
.pretraga-rezultati[hidden] { display: none; }
.pr-grupa h3 {
  font-family: var(--font-naslov); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 1px; text-transform: uppercase;
  color: rgb(202, 194, 192); margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.pr-grupa ul { list-style: none; margin: 0; padding: 0; }
.pr-grupa li a {
  display: flex; align-items: center; gap: 14px; padding: 7px 0; color: #fff; text-decoration: none;
  font-family: var(--font-tekst); font-size: 16px; line-height: 1.3; letter-spacing: 0; transition: color .3s ease;
}
.pr-grupa li a:hover { color: var(--akcenat); }
.pr-broj { color: rgb(202, 194, 192); font-size: 14px; }
.pr-grupa img { width: 56px; height: 56px; object-fit: cover; border-radius: 3px; flex: none; background: rgba(255, 255, 255, .06); }
.pr-kat { display: block; color: rgb(202, 194, 192); font-size: 13px; }
.pr-sve { margin: 12px 0 0; }
.pr-sve a { color: var(--akcenat); font-family: var(--font-naslov); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; }
.pr-sve a:hover { color: #fff; }
.pr-nista { grid-column: 1 / -1; margin: 0; color: rgb(202, 194, 192); font-size: 16px; }

.bocna-rezultati {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin-top: -1px;
  background: var(--bg-belo); border: 1px solid #E2D9CE; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); max-height: 420px; overflow-y: auto;
}
.bocna-rezultati[hidden] { display: none; }
.bocna-rezultati a {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid #F0EAE1;
  color: var(--tekst-tamni); text-decoration: none; font-family: var(--font-tekst); font-size: 15px; line-height: 1.3; letter-spacing: 0;
}
.bocna-rezultati a:first-child { border-top: 0; }
.bocna-rezultati a:hover { background: #F7F3EC; color: var(--akcenat); }
.bocna-rezultati img { width: 48px; height: 48px; object-fit: cover; flex: none; border-radius: 2px; background: #F0EAE1; }
.bocna-rezultati .pr-sve-b { justify-content: center; color: var(--akcenat); font-family: var(--font-naslov); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.bocna-rezultati .pr-nista-b { margin: 0; padding: 12px; color: var(--tekst); font-size: 15px; }

.rezultati-pretrage[hidden] { display: none; }
.rezultati-pretrage .broj-rezultata { margin: 0 0 30px; }
.mreza-proizvoda.sakrivena { display: none; }

@media (max-width: 1679px) {
  :root { --pretraga-h: 470px; --pretraga-forma-top: 60%; --pretraga-vrh: 233px; }
  .zatvori-pretragu { right: 65px; }
  .pretraga-logo { left: 75px; }
}
@media (max-width: 1439px) {
  :root { --pretraga-h: 420px; --pretraga-sirina: 1100px; --pretraga-fs: 27.2px; --pretraga-forma-top: 65%; --pretraga-vrh: 232px; }
  .zatvori-pretragu { right: 80px; }
  .pretraga-logo { left: 90px; }
}
@media (max-width: 1279px) {
  :root { --pretraga-h: 360px; --pretraga-sirina: calc(100vw - 60px); --pretraga-vrh: 193px; }
  .zatvori-pretragu { top: 30px; right: 40px; font-size: 20px; }
  .pretraga-logo { top: 40px; left: 50px; }
}
@media (max-width: 1023px) {
  :root { --pretraga-h: 340px; --pretraga-fs: 22.1px; --pretraga-polje-h: 2.8em; --pretraga-vrh: 190px; }
  .zatvori-pretragu { top: 20px; right: 20px; }
  .pretraga-logo { top: 30px; left: 30px; }
  .pretraga.otvorena .pretraga-zavesa { display: none; }
  .pretraga-rezultati { gap: 28px; }
}
@media (max-width: 767px) {
  :root { --pretraga-h: 320px; --pretraga-vrh: 177px; }
  .pretraga-dugme { font-size: 22px; }
  .pretraga-rezultati { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pr-grupa img { width: 48px; height: 48px; }
}
@media (max-width: 600px) {
  :root { --pretraga-h: 280px; --pretraga-vrh: 151px; }
}
@media (max-width: 479px) {
  :root { --pretraga-h: 240px; --pretraga-sirina: calc(100vw - 40px); --pretraga-fs: 19.2px; --pretraga-vrh: 129px; }
  .zatvori-pretragu { top: 20px; right: 10px; width: 38px; height: 38px; font-size: 18px; }
  .pretraga-logo { top: 30px; left: 20px; }
  .pretraga-dugme { font-size: 20px; }
}

.paginacija[hidden] { display: none; }