/* =========================================================
   Slatka dolina — dizajn sistem
   Boje su uzete direktno iz loga gazdinstva.
   Tema se prebacuje atributom data-tema="malina|jagoda".
   ========================================================= */

:root {
  --brend-crvena: #c00000;
  --brend-crvena-zi: #e11d24;
  --brend-zelena: #7a9200;
  --brend-narandzasta: #f06018;

  --ff-naslov: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-telo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-pismo: "Pinyon Script", "Cormorant Garamond", cursive;

  --sirina: 1240px;
  --uska: 760px;
  --razmak: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 2px;
  --prelaz: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- tamna tema: svet maline --- */
:root,
[data-tema="malina"] {
  --pozadina: #0a0a0b;
  --pozadina-2: #141416;
  --pozadina-3: #1d1d20;
  --tekst: #f2eee9;
  --tekst-tiho: rgba(242, 238, 233, 0.6);
  --tekst-tisi: rgba(242, 238, 233, 0.38);
  --linija: rgba(242, 238, 233, 0.14);
  --linija-jaka: rgba(242, 238, 233, 0.28);
  --akcenat: var(--brend-crvena-zi);
  /* Sitan tekst u akcentu: brend crvena daje 3.05:1 na ovoj podlozi, a
     trazi se 4.5:1. Svetlija nijansa daje 4.93:1 i ostaje u brendu. */
  --akcenat-sitno: #ec3b30;
  --na-akcentu: #fff;
  --senka: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* --- svetla tema: svet jagode --- */
[data-tema="jagoda"] {
  --pozadina: #f6f2eb;
  --pozadina-2: #fffdf9;
  --pozadina-3: #ece5da;
  --tekst: #16110f;
  --tekst-tiho: rgba(22, 17, 15, 0.62);
  --tekst-tisi: rgba(22, 17, 15, 0.4);
  --linija: rgba(22, 17, 15, 0.14);
  --linija-jaka: rgba(22, 17, 15, 0.3);
  --akcenat: var(--brend-crvena);
  /* na svetloj podlozi brend crvena daje 5.81:1, pa nema sta da se menja */
  --akcenat-sitno: var(--brend-crvena);
  --na-akcentu: #fff;
  --senka: 0 24px 60px rgba(22, 17, 15, 0.12);
}

/* =========================================================
   Osnova
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  background: var(--pozadina);
  color: var(--tekst);
  font-family: var(--ff-telo);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--akcenat);
  outline-offset: 3px;
}

::selection {
  background: var(--brend-crvena);
  color: #fff;
}

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

.preskoci {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--brend-crvena);
  color: #fff;
}

.preskoci:focus {
  top: 1rem;
}

/* =========================================================
   Tipografija
   ========================================================= */

h1,
h2,
h3,
h4 {
  font-family: var(--ff-naslov);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.9rem, 8vw, 6rem);
}

h2 {
  font-size: clamp(2.1rem, 5vw, 3.9rem);
}

h3 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

p {
  text-wrap: pretty;
}

.nadnaslov {
  display: block;
  margin-bottom: 1.4rem;
  font-family: var(--ff-telo);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--akcenat-sitno);
}

.nadnaslov--tiho {
  color: var(--tekst-tisi);
}

.pismo {
  font-family: var(--ff-pismo);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.uvod {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.6;
  color: var(--tekst-tiho);
}

/* Naglasen pocetak pasusa. U bazi ostaje normalno napisan tekst — verzal bi
   se u adminu citao kao vika, a ovde je dovoljan kontrast. */
.naglasak {
  color: var(--tekst);
  font-weight: 600;
}

.tiho {
  color: var(--tekst-tiho);
}

/* =========================================================
   Raspored
   ========================================================= */

.omotac {
  width: min(100% - 2.5rem, var(--sirina));
  margin-inline: auto;
}

.sekcija {
  position: relative;
  padding-block: var(--razmak);
  background: var(--pozadina);
  color: var(--tekst);
}

.sekcija--tesno {
  padding-block: calc(var(--razmak) * 0.6);
}

.zaglavlje-sekcije {
  max-width: var(--uska);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.zaglavlje-sekcije--centar {
  margin-inline: auto;
  text-align: center;
}

.zaglavlje-sekcije p {
  margin-top: 1.25rem;
}

/* =========================================================
   Dugmad
   ========================================================= */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--akcenat);
  color: var(--na-akcentu);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--prelaz), color var(--prelaz),
    border-color var(--prelaz), transform var(--prelaz);
}

.dugme:hover {
  background: var(--brend-crvena);
  transform: translateY(-2px);
}

.dugme:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.dugme--obris {
  background: transparent;
  border-color: var(--linija-jaka);
  color: var(--tekst);
}

.dugme--obris:hover {
  background: var(--tekst);
  color: var(--pozadina);
  border-color: var(--tekst);
}

.dugme--puno {
  width: 100%;
}

/* Koristi se i na <a> i na <button> ("Nazad na pregled" u korpi). Bez ovog
   ponistavanja dugme zadrzi belu podlogu i okvir pregledaca. */
.veza-strelica {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0 0.3rem;
  border: 0;
  border-bottom: 1px solid var(--linija-jaka);
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: gap var(--prelaz), border-color var(--prelaz), color var(--prelaz);
}

.veza-strelica:hover {
  gap: 1rem;
  color: var(--akcenat);
  border-color: var(--akcenat);
}

/* =========================================================
   Zaglavlje
   ========================================================= */

.zaglavlje {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 1.15rem;
  transition: background var(--prelaz), backdrop-filter var(--prelaz),
    padding var(--prelaz), border-color var(--prelaz);
  border-bottom: 1px solid transparent;
}

.zaglavlje.zalepljeno {
  padding-block: 0.7rem;
  background: rgba(10, 10, 11, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: rgba(242, 238, 233, 0.12);
}

.zaglavlje__red {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.znak {
  color: #f2eee9;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.znak img {
  width: 46px;
  height: auto;
  transition: width var(--prelaz);
}

.zaglavlje.zalepljeno .znak img {
  width: 38px;
}

.znak__tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  color: #f2eee9;
}

.znak__ime {
  font-family: var(--ff-naslov);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.znak__pod {
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 238, 233, 0.5);
}

.navigacija {
  display: flex;
  align-items: center;
  gap: 2.1rem;
}

.navigacija a {
  position: relative;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(242, 238, 233, 0.72);
  transition: color var(--prelaz);
}

.navigacija a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--brend-crvena-zi);
  transition: width var(--prelaz);
}

.navigacija a:hover {
  color: #f2eee9;
}

.navigacija a:hover::after {
  width: 100%;
}

.zaglavlje__alati {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.korpa-dugme {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid rgba(242, 238, 233, 0.28);
  border-radius: var(--radius);
  background: transparent;
  color: #f2eee9;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--prelaz), border-color var(--prelaz);
}

.korpa-dugme:hover {
  background: rgba(242, 238, 233, 0.1);
  border-color: rgba(242, 238, 233, 0.5);
}

.korpa-dugme__ikona {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.korpa-dugme__broj {
  display: grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: 0.35rem;
  border-radius: 999px;
  background: var(--brend-crvena-zi);
  color: #fff;
  font-size: 0.68rem;
  line-height: 1;
}

.korpa-dugme__broj[hidden] {
  display: none;
}

.meni-dugme {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(242, 238, 233, 0.28);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}

/* :not(.samo-citac) je nuzno — inace ova pravila pogode i skriveni tekst za
   citace ekrana, pa on dobije belu traku 18x1 i position: relative, ispadne iz
   skrivanja i napravi drugi red u mrezi dugmeta. */
.meni-dugme span:not(.samo-citac),
.meni-dugme span:not(.samo-citac)::before,
.meni-dugme span:not(.samo-citac)::after {
  display: block;
  width: 18px;
  height: 1px;
  background: #f2eee9;
  transition: transform var(--prelaz), opacity var(--prelaz);
}

.meni-dugme span:not(.samo-citac) {
  margin-inline: auto;
  position: relative;
}

.meni-dugme span:not(.samo-citac)::before,
.meni-dugme span:not(.samo-citac)::after {
  content: "";
  position: absolute;
}

.meni-dugme span:not(.samo-citac)::before {
  top: -6px;
}

.meni-dugme span:not(.samo-citac)::after {
  top: 6px;
}

.meni-otvoren .meni-dugme span:not(.samo-citac) {
  background: transparent;
}

.meni-otvoren .meni-dugme span:not(.samo-citac)::before {
  transform: translateY(6px) rotate(45deg);
}

.meni-otvoren .meni-dugme span:not(.samo-citac)::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* =========================================================
   Hero — kinematski slajder
   ========================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #0a0a0b;
  color: #f2eee9;
}

.hero__scena {
  position: absolute;
  inset: 0;
}

.hero__kadar {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1400ms ease-in-out;
}

.hero__kadar.aktivan {
  opacity: 1;
}

.hero__kadar img,
.hero__kadar video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* spori zum daje snimljenom kadru zivot */
.hero__kadar.aktivan img {
  animation: kenburns 9s ease-out forwards;
}

@keyframes kenburns {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.13);
  }
}

/* zeleni malinjak je svetao — tekst nad njim trazi ozbiljan veo */
.hero__veo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8, 8, 9, 0.92) 0%, rgba(8, 8, 9, 0.72) 38%, rgba(8, 8, 9, 0.15) 75%, rgba(8, 8, 9, 0.35) 100%),
    linear-gradient(to top, rgba(8, 8, 9, 0.95) 0%, rgba(8, 8, 9, 0.3) 42%, rgba(8, 8, 9, 0.55) 100%);
}

.hero__sadrzaj {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, var(--sirina));
  margin-inline: auto;
  padding-bottom: clamp(5rem, 12vh, 9rem);
  padding-top: 9rem;
}

.hero__unutra {
  max-width: min(100%, 660px);
}

.hero .nadnaslov {
  color: #f2eee9;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}

.hero h1 {
  margin-bottom: 1.6rem;
  font-size: clamp(2.9rem, 6.4vw, 5.2rem);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}

.hero h1 em {
  display: block;
  font-family: var(--ff-pismo);
  font-style: normal;
  font-size: 1.15em;
  line-height: 0.95;
  color: var(--brend-crvena-zi);
}

.hero__uvod {
  max-width: 46ch;
  margin-bottom: 2.4rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(242, 238, 233, 0.85);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.7);
}

.hero__akcije {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero__akcije .dugme--obris {
  border-color: rgba(242, 238, 233, 0.35);
  color: #f2eee9;
}

.hero__akcije .dugme--obris:hover {
  background: #f2eee9;
  color: #0a0a0b;
}

.hero__nogica {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 3;
  width: min(100% - 2.5rem, var(--sirina));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.hero__trake {
  display: flex;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
}

.hero__traka {
  width: 46px;
  height: 2px;
  padding: 0;
  border: 0;
  background: rgba(242, 238, 233, 0.25);
  cursor: pointer;
  overflow: hidden;
}

.hero__traka span {
  display: block;
  width: 100%;
  height: 100%;
  background: #f2eee9;
  transform: scaleX(0);
  transform-origin: left;
}

.hero__traka[aria-current="true"] span {
  animation: napredak var(--trajanje, 7s) linear forwards;
}

@keyframes napredak {
  to {
    transform: scaleX(1);
  }
}

.hero__skrol {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 238, 233, 0.5);
}

.hero__skrol::after {
  content: "";
  width: 46px;
  height: 1px;
  background: rgba(242, 238, 233, 0.35);
  animation: klizi 2.4s ease-in-out infinite;
  transform-origin: left;
}

@keyframes klizi {
  0%, 100% { transform: scaleX(0.4); }
  50% { transform: scaleX(1); }
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* poster se vidi dok video ne krene — bez skoka jer je poster prvi kadar */
.hero__scena::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* =========================================================
   Hero podstranice
   ========================================================= */

.omotac-uzi {
  width: min(100% - 2.5rem, 620px);
  margin-inline: auto;
}

/* stranica ukusa: tipografija levo, flasa desno */
.hero-ukus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 100svh;
  background: var(--pozadina);
  color: var(--tekst);
}

.hero-ukus__tekst {
  padding: 8rem clamp(1.5rem, 3vw, 3rem) 4rem;
}

.hero-ukus__tekst .omotac-uzi {
  margin-inline: 0 auto;
}

/* kaligrafija ima duboke donje poteze (J, g) — bez ovog prostora
   udaraju u naslov ispod */
.hero-ukus__pismo {
  font-family: var(--ff-pismo);
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 1;
  padding-bottom: 0.18em;
  margin-bottom: 0.25rem;
  color: var(--akcenat);
}

.hero-ukus h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-family: var(--ff-telo);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}

.hero-ukus__slika {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--pozadina-2);
}

.hero-ukus__slika img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: smena-kadra 16.5s infinite;
}

.hero-ukus__slika img:nth-child(1) { animation-delay: 0s; }
.hero-ukus__slika img:nth-child(2) { animation-delay: 5.5s; }
.hero-ukus__slika img:nth-child(3) { animation-delay: 11s; }

/* povratak na pocetnu razmeru se desava dok je kadar neproziran, pa se ne vidi */
@keyframes smena-kadra {
  0% { opacity: 0; transform: scale(1); }
  4% { opacity: 1; }
  30% { opacity: 1; transform: scale(1.07); }
  36% { opacity: 0; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1); }
}

/* gazdinstvo: slika preko cele sirine sa tekstom preko nje */
.hero-strana {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 74svh;
  background: #0a0a0b;
  color: #f2eee9;
  overflow: hidden;
}

.hero-strana__slika {
  position: absolute;
  inset: 0;
}

.hero-strana__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-strana__veo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 9, 0.94) 0%, rgba(8, 8, 9, 0.42) 55%, rgba(8, 8, 9, 0.55) 100%);
}

.hero-strana__sadrzaj {
  position: relative;
  z-index: 2;
  padding-block: 9rem clamp(3rem, 7vh, 5rem);
  max-width: 62ch;
}

.hero-strana__sadrzaj h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  margin-bottom: 1.25rem;
}

.hero-strana__sadrzaj .uvod {
  color: rgba(242, 238, 233, 0.8);
}

.sekcija--vrh {
  padding-top: 9rem;
}

.greska {
  min-height: 78svh;
  display: grid;
  place-items: center;
}

/* =========================================================
   Mrvice
   ========================================================= */

.mrvice {
  margin-bottom: 1.75rem;
}

.mrvice ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.mrvice li + li::before {
  content: "/";
  margin-right: 0.5rem;
  opacity: 0.5;
}

.mrvice a:hover {
  color: var(--akcenat);
}

.hero-strana .mrvice ol {
  color: rgba(242, 238, 233, 0.55);
}

/* =========================================================
   Traka tvrdnji
   ========================================================= */

.tvrdnje {
  border-block: 1px solid var(--linija);
  background: var(--pozadina-2);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.tvrdnje__mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2.5rem;
}

.tvrdnja {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.tvrdnja svg {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 0.15rem;
  stroke: var(--akcenat);
  fill: none;
  stroke-width: 1.5;
}

.tvrdnja h2,
.tvrdnja h3 {
  font-family: var(--ff-telo);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 0.3rem;
}

.tvrdnja p {
  font-size: 0.9rem;
  color: var(--tekst-tiho);
  line-height: 1.5;
}

/* Traka sa oznakama — samo ikona i natpis, objasnjenje ide u sekciju ispod. */
.oznake {
  border-block: 1px solid var(--linija);
  background: var(--pozadina-2);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.oznake__zaglavlje {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* Bez razmaka izmedju kolona — razdvaja ih uspravna linija, a odmak pravi
   unutrasnja margina, da linija ide punom visinom stuba. */
/* Razmak pravi gap, a linija stoji na njegovoj polovini kao pseudoelement.
   Kad je linija bila border na stubu, krajnji stubovi su morali da izgube
   marginu sa spoljne strane da bi se poravnali sa ostatkom stranice, pa su
   ispadali siri od srednjih. list-style: none ne skida podrazumevanu
   marginu <ul>-a, zato i padding-left. */
.oznake__niz {
  --razmak: clamp(2.2rem, 4.4vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--razmak);
  list-style: none;
  padding-left: 0;
}

.oznaka {
  position: relative;
}

.oznaka + .oznaka::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: calc(var(--razmak) / -2);
  width: 1px;
  background: var(--linija);
}

.oznaka svg {
  width: 38px;
  height: 38px;
  stroke: var(--akcenat);
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Kosa crta preko ikone: prvo siri potez u boji pozadine, koji useca kanal
   kroz crtez, pa tanak crveni potez preko njega. Bez toga se crte stapaju. */
.oznaka__rez {
  stroke: var(--pozadina-2);
  stroke-width: 4;
}

.oznaka__kosa {
  stroke: var(--akcenat);
  stroke-width: 1.6;
}

.oznaka h3 {
  font-family: var(--ff-telo);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-top: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--linija);
}

.oznaka p {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--tekst-tiho);
  line-height: 1.65;
}

.oznaka__uvodna {
  color: var(--tekst);
  font-weight: 600;
}

/* Numerisani koraci bez slika — brojevi kroz counter, da se redosled ne
   prepisuje rucno kad se korak doda ili skloni. */
.koraci-lista {
  list-style: none;
  counter-reset: korak;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-left: 0;
}

.korak-red {
  counter-increment: korak;
  position: relative;
  padding-left: 3.4rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--linija);
}

.korak-red:last-child {
  border-bottom: 1px solid var(--linija);
}

.korak-red::before {
  content: counter(korak, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.7rem;
  font-family: var(--ff-telo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--akcenat-sitno);
}

.korak-red h3 {
  font-family: var(--ff-telo);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.korak-red p {
  font-size: 0.95rem;
  color: var(--tekst-tiho);
  line-height: 1.65;
}

/* Obicna mreza kartica sa tekstom. .znali se ne koristi za ovo — ona ima
   izricita raspoređivanja za mozaik sa dve fotografije. */
/* Tri stupca, ne auto-fit: sest kartica bi na sirokom ekranu dalo 4 + 2 i
   ostavilo rupu u drugom redu. */
.kartice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.kartica-tekst {
  padding: 1.75rem 1.6rem;
  border: 1px solid var(--linija);
  background: var(--pozadina-2);
}

.kartica-tekst h3 {
  font-family: var(--ff-telo);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--akcenat-sitno);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--linija);
}

.kartica-tekst p {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: var(--tekst-tiho);
  line-height: 1.65;
}

/* Utisci kupaca */
.utisci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1.4rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.utisak {
  margin: 0;
  padding: 2rem 1.8rem;
  border: 1px solid var(--linija);
  background: var(--pozadina-2);
}

.utisak blockquote {
  margin: 0;
  font-family: var(--ff-naslov);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-style: italic;
  line-height: 1.5;
}

.utisak figcaption {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linija);
  font-family: var(--ff-telo);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.utisak figcaption span {
  display: block;
  margin-top: 0.3rem;
  font-weight: 400;
  color: var(--tekst-tisi);
}

/* Komercijalne cinjenice uz poziv na akciju: ikona i dva reda teksta.
   auto-fit daje tri stupca kad ima mesta, dva u uzem sudu — bez posebnog
   pravila za mobilni. */
.cinjenice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1.4rem 1.6rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linija);
  list-style: none;
}

.cinjenice li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.cinjenice svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  stroke: var(--akcenat);
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cinjenice span {
  font-family: var(--ff-telo);
  font-size: 0.72rem;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-tiho);
}

.cinjenice b {
  display: block;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tekst);
}

/* Da li ste znali — mozaik: cetiri kolone, tri reda, dve celije nose
   fotografiju. Sve celije se postavljaju izricito, jer automatsko
   raspoređivanje uz dve celije koje se prostiru ostavlja rupe. */
.znali {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
  list-style: none;
  padding-left: 0;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.znali > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.znali > :nth-child(2) { grid-area: 1 / 3; }
.znali > :nth-child(3) { grid-area: 1 / 4; }
.znali > :nth-child(4) { grid-area: 2 / 3; }
.znali > :nth-child(5) { grid-area: 2 / 4; }
.znali > :nth-child(6) { grid-area: 3 / 1; }
.znali > :nth-child(7) { grid-area: 3 / 2; }
.znali > :nth-child(8) { grid-area: 3 / 3 / 4 / 5; }

/* Fotografija je izvan toka, inace bi njena prirodna visina odredila visinu
   celog reda i kartice sa tekstom bi se razvukle. Visinu redova daje tekst. */
.znali__foto {
  position: relative;
  overflow: hidden;
  min-height: clamp(180px, 18vw, 240px);
}

.znali__foto picture {
  position: absolute;
  inset: 0;
}

.znali__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.znali__kartica {
  padding: 1.75rem 1.6rem;
  border: 1px solid var(--linija);
  background: var(--pozadina-2);
}

.znali__kartica h3 {
  font-family: var(--ff-telo);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--akcenat-sitno);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--linija);
}

.znali__kartica p {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: var(--tekst-tiho);
  line-height: 1.65;
}

/* =========================================================
   Dva sveta — malina / jagoda
   ========================================================= */

.svetovi {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.svet {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--pozadina);
  color: var(--tekst);
  overflow: hidden;
}

/* Fotografija ide preko cele sirine panela umesto da lebdi na nasoj boji.
   Studijske podloge su hladno sive (#c8cacd) a tema jagode je topla krem —
   svako "lebdenje" ostavlja vidljiv siv pravougaonik. Ovako je fotografija
   sama sebi pozadina pa neslaganja nema. */
.svet__slika {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.svet__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.svet:hover .svet__slika img {
  transform: scale(1.04);
}

.svet__tekst {
  max-width: 42ch;
  justify-self: center;
  align-self: center;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}

.svet__ime {
  font-family: var(--ff-pismo);
  font-size: clamp(3.4rem, 7vw, 5.2rem);
  line-height: 1;
  padding-bottom: 0.14em;
  margin-bottom: 0.9rem;
}

.svet__opis {
  margin-bottom: 2rem;
  color: var(--tekst-tiho);
}

.svet__oznaka {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--linija-jaka);
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tekst-tiho);
}

/* Geslo ide odmah ispod imena ukusa, kao potpis brenda — isto je na oba panela.
   Nije dugme nego tekst, odvojen tankom crtom, da se ne meša sa vezom ispod. */
.svet__geslo {
  display: block;
  margin: 0.9rem auto 1.6rem;
  padding-bottom: 0.9rem;
  position: relative;
  color: var(--akcenat-sitno);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.svet__geslo::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.5rem;
  height: 1px;
  transform: translateX(-50%);
  background: var(--linija-jaka);
}

/* =========================================================
   Proizvodi
   ========================================================= */

.proizvodi__mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--linija);
  border: 1px solid var(--linija);
}

.kartica {
  display: flex;
  flex-direction: column;
  background: var(--pozadina);
  color: var(--tekst);
  transition: background var(--prelaz);
}

.kartica:hover {
  background: var(--pozadina-2);
}

.kartica__slika {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--pozadina-2);
}

.kartica__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kartica:hover .kartica__slika img {
  transform: scale(1.05);
}

.kartica__znacka {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.3rem 0.7rem;
  background: var(--brend-crvena-zi);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kartica__telo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.5rem;
  padding: 1.6rem;
}

.kartica__naslov {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.kartica__ime {
  font-family: var(--ff-naslov);
  font-size: 1.5rem;
  line-height: 1.1;
}

.kartica__zapremina {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
  white-space: nowrap;
}

.kartica__kratko {
  flex-grow: 1;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--tekst-tiho);
}

.kartica__dno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linija);
}

.kartica__cena {
  font-family: var(--ff-naslov);
  font-size: 1.45rem;
  letter-spacing: -0.01em;
}

.kartica__cena small {
  font-family: var(--ff-telo);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.dodaj {
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--linija-jaka);
  border-radius: var(--radius);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--prelaz), color var(--prelaz), border-color var(--prelaz);
}

.dodaj:hover {
  background: var(--akcenat);
  border-color: var(--akcenat);
  color: #fff;
}

.dodaj.dodato {
  background: var(--brend-zelena);
  border-color: var(--brend-zelena);
  color: #fff;
}

/* traka za poklon paket */
.paket {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  margin-top: 1px;
  border: 1px solid var(--linija);
  background: var(--pozadina-2);
  color: var(--tekst);
  overflow: hidden;
}

.paket__slika {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.paket__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.paket:hover .paket__slika img {
  transform: scale(1.04);
}

.paket__telo {
  padding: clamp(2rem, 4vw, 3.5rem);
}

.paket__telo h3 {
  margin-bottom: 1rem;
}

.paket__opis {
  max-width: 44ch;
  margin-bottom: 2rem;
  color: var(--tekst-tiho);
}

.paket__dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.napomena-cene {
  margin-top: 1.5rem;
  font-size: 0.78rem;
  color: var(--tekst-tisi);
}

.proizvodi__mreza--dve {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  max-width: 760px;
  margin-inline: auto;
}

/* =========================================================
   Paketi — kartice u prodavnici
   ========================================================= */

.paketi__mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.5rem;
}

.paket-kartica {
  display: flex;
  flex-direction: column;
  background: var(--pozadina);
  color: var(--tekst);
  border: 1px solid var(--linija);
  overflow: hidden;
  transition: border-color var(--prelaz), transform var(--prelaz);
}

.paket-kartica:hover {
  border-color: var(--linija-jaka);
  transform: translateY(-3px);
}

/* Kartice paketa: mora da se vidi cela flaša i cela čaša, pa ide `contain`.
   Slike su izmešane — šest uspravnih (0,67–0,75) i dve položene (1,33 i 1,50) —
   pa nijedan odnos ne pokriva sve bez praznine. Kvadrat je sredina: kartica
   ostaje niska, a prazninu popunjava zamućena kopija iste fotografije, pa se
   ne vidi spoj ni na jednoj podlozi. */
.paket-kartica__slika {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pozadina-2);
}

.paket-kartica__slika picture {
  position: absolute;
  inset: 0;
  display: block;
}

/* uvecanje se odseca ovde, da ne siri karticu — zamucenje inace ostavi
   providne ivice, pa mora malo da se prebaci preko */
.paket-kartica__mrlja {
  overflow: hidden;
}

.paket-kartica__mrlja img {
  object-fit: cover;
  transform: scale(1.15);
  filter: blur(22px) brightness(0.88);
}

.paket-kartica__slika img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* zumira se samo prava slika — mrlja zadrzava svoje uvecanje */
.paket-kartica:hover .paket-kartica__slika picture:not(.paket-kartica__mrlja) img {
  transform: scale(1.05);
}

.paket-kartica__telo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem;
}

.paket-kartica__oznaka {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akcenat-sitno);
}

.paket-kartica h3 {
  margin: 0.5rem 0 0.4rem;
  font-size: 1.4rem;
}

.paket-kartica h3 a:hover {
  color: var(--akcenat);
}

.paket-kartica__sastav {
  font-size: 0.82rem;
  color: var(--tekst-tisi);
}

.paket-kartica__kratko {
  flex-grow: 1;
  margin-top: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--tekst-tiho);
}

.paket-kartica__dno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linija);
}

.paket-kartica__veza {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.paket-kartica__veza:hover {
  color: var(--akcenat);
}

/* =========================================================
   Prodavnica — bočni filteri
   ========================================================= */

.prodavnica-raspored {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.filteri {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 2rem;
}

.filteri__grupa {
  display: grid;
  gap: 0.35rem;
}

.filteri h2 {
  margin-bottom: 0.6rem;
  font-family: var(--ff-telo);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.filteri__grupa button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--tekst-tiho);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: color var(--prelaz), background var(--prelaz), border-color var(--prelaz);
}

.filteri__grupa button:hover {
  color: var(--tekst);
  background: var(--pozadina-2);
}

.filteri__grupa button[aria-pressed="true"] {
  border-left-color: var(--akcenat);
  background: var(--pozadina-2);
  color: var(--tekst);
  font-weight: 600;
}

.filteri__poziv {
  padding: 1.35rem;
  border: 1px solid var(--linija);
  background: var(--pozadina-2);
}

.filteri__poziv p {
  margin-bottom: 1.1rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--tekst-tiho);
}

.filteri__poziv .dugme {
  padding-inline: 1rem;
  font-size: 0.7rem;
}

.paket-kartica[hidden] {
  display: none;
}

.prazan-filter {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--tekst-tiho);
}

.prazan-filter button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--akcenat);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* =========================================================
   Sastavljač paketa
   ========================================================= */

.sastavljac {
  max-width: 820px;
  margin-inline: auto;
  border: 1px solid var(--linija);
  background: var(--pozadina-2);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.sastavljac__oznaka {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.sastavljac__dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sastavljac__dugmad button {
  padding: 0.65rem 1.3rem;
  border: 1px solid var(--linija-jaka);
  border-radius: 999px;
  background: transparent;
  color: var(--tekst-tiho);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--prelaz), color var(--prelaz), border-color var(--prelaz);
}

.sastavljac__dugmad button:hover {
  color: var(--tekst);
  border-color: var(--tekst);
}

.sastavljac__dugmad button[aria-pressed="true"] {
  background: var(--akcenat);
  border-color: var(--akcenat);
  color: #fff;
}

.sastavljac__ukusi {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

/* red ukusa je mala kartica proizvoda — isti jezik kao paketi u prodavnici */
.sastavljac__ukus {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-right: 1.25rem;
  border: 1px solid var(--linija);
  background: var(--pozadina);
  color: var(--tekst);
  overflow: hidden;
  transition: border-color var(--prelaz);
}

.sastavljac__ukus:hover {
  border-color: var(--linija-jaka);
}

.sastavljac__ukus img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  flex: none;
  background: var(--pozadina-2);
}

.sastavljac__ukus-telo {
  flex-grow: 1;
  display: grid;
  gap: 0.2rem;
  padding-block: 1rem;
}

.sastavljac__ukus-telo strong {
  font-family: var(--ff-naslov);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
}

.sastavljac__ukus-telo span {
  font-size: 0.78rem;
  color: var(--tekst-tisi);
}

.sastavljac__dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linija);
}

.sastavljac__stanje {
  display: grid;
  gap: 0.15rem;
}

.sastavljac__stanje strong {
  font-size: 0.95rem;
  font-weight: 600;
}

.sastavljac__stanje strong.puna {
  color: var(--brend-zelena);
}

.sastavljac__stanje strong.nije-puna {
  color: var(--brend-narandzasta);
}

.sastavljac__stanje span {
  font-size: 0.76rem;
  color: var(--tekst-tisi);
}

.sastavljac__cena {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* =========================================================
   Stranica paketa
   ========================================================= */

.proizvod {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--pozadina);
  color: var(--tekst);
}

.proizvod__slika {
  min-height: 60svh;
  background: var(--pozadina-2);
}

.proizvod__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proizvod__telo {
  display: grid;
  align-content: center;
  padding: 8rem clamp(1.5rem, 3vw, 3rem) 4rem;
}

.proizvod__telo .omotac-uzi {
  margin-inline: 0 auto;
}

.proizvod__telo h1 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  margin-bottom: 1rem;
}

.proizvod__cena {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1.75rem;
  font-family: var(--ff-naslov);
  font-size: 2.2rem;
  letter-spacing: -0.01em;
}

.proizvod__cena small {
  font-family: var(--ff-telo);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.proizvod__pokom {
  font-family: var(--ff-telo);
  font-size: 0.82rem;
  color: var(--tekst-tisi);
}

.proizvod__kupi {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

.brojac--veliki button {
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
}

.brojac--veliki span {
  min-width: 2.5rem;
  font-size: 1rem;
}

.proizvod__napomena {
  margin-top: 1.25rem;
  font-size: 0.82rem;
  color: var(--tekst-tisi);
}

.proizvod__opis {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linija);
  color: var(--tekst-tiho);
}

.u-kutiji {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.u-kutiji__stavka {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--linija);
  background: var(--pozadina);
  color: var(--tekst);
}

.u-kutiji__slika {
  position: relative;
  flex: none;
  width: 84px;
  aspect-ratio: 3 / 4;
}

.u-kutiji__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u-kutiji__broj {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.2rem 0.5rem;
  background: var(--akcenat);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
}

.u-kutiji__stavka h3 {
  font-size: 1.25rem;
  margin-bottom: 0.3rem;
}

.u-kutiji__cena {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--tekst-tisi);
}

/* =========================================================
   Stranica korpe
   ========================================================= */

.korpa-strana {
  display: grid;
  grid-template-columns: 1fr 360px;
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.korpa-strana__stavke {
  display: grid;
  gap: 1rem;
}

.korpa-red {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.1rem;
  border: 1px solid var(--linija);
  background: var(--pozadina);
  color: var(--tekst);
}

.korpa-red__slika {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--pozadina-2);
}

.korpa-red__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.korpa-red__telo h3 {
  font-size: 1.25rem;
  margin-bottom: 0.3rem;
}

.korpa-red__telo h3 a:hover {
  color: var(--akcenat);
}

.korpa-red__sastav {
  font-size: 0.84rem;
  color: var(--tekst-tiho);
}

.korpa-red__pokom {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--tekst-tisi);
}

.korpa-red__desno {
  display: grid;
  justify-items: end;
  gap: 0.6rem;
}

.korpa-red__iznos {
  font-family: var(--ff-naslov);
  font-size: 1.35rem;
  font-weight: 400;
}

.korpa-red__skini {
  border: 0;
  background: none;
  padding: 0;
  color: var(--tekst-tisi);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.korpa-red__skini:hover {
  color: var(--akcenat);
}

.korpa-strana__zbir {
  position: sticky;
  top: 6rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--linija);
  background: var(--pozadina-2);
}

.naslov-zbira {
  margin-bottom: 1.25rem;
  font-family: var(--ff-telo);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.zbir__sitno {
  margin-top: 1rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--tekst-tisi);
}

.potvrda {
  max-width: 46ch;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}

.potvrda__znak {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--brend-zelena);
  color: #fff;
  font-size: 1.8rem;
}

.potvrda .deklaracija {
  margin-top: 2rem;
  text-align: left;
}

/* =========================================================
   Poziv na akciju
   ========================================================= */

.poziv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border: 1px solid var(--linija);
  background: var(--pozadina-2);
  overflow: hidden;
}

.poziv__slika {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.poziv__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.poziv:hover .poziv__slika img {
  transform: scale(1.04);
}

.poziv__telo {
  padding: clamp(2rem, 4vw, 3.5rem);
}

.poziv__telo h2 {
  margin-bottom: 1rem;
}

/* =========================================================
   Šta sok ne sadrži
   ========================================================= */

.bez-kartica {
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--linija);
  background: var(--pozadina-2);
}

.bez-kartica h3 {
  margin-bottom: 1.5rem;
  font-family: var(--ff-telo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.bez-lista {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  padding: 0;
}

.bez-lista li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--ff-naslov);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.2;
}

/* precrtan krug — poruka je sta NIJE unutra */
.bez-lista li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--akcenat);
  border-radius: 50%;
  background:
    linear-gradient(to bottom right, transparent 46%, var(--akcenat) 46%, var(--akcenat) 54%, transparent 54%);
}

.bez-kartica__dno {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linija);
  font-size: 0.92rem;
  color: var(--tekst-tiho);
}

/* =========================================================
   Deklaracija
   ========================================================= */

.deklaracija {
  display: grid;
  /* min() drzi kolonu unutar suda — bez toga 260px probije uzak stubac,
     npr. kad tabela stoji u pola sirine poziva na akciju. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--linija);
}

.deklaracija > div {
  display: grid;
  gap: 0.35rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--linija);
  padding-right: 2rem;
}

.deklaracija dt {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.deklaracija dd {
  margin: 0;
  font-size: 0.98rem;
  color: var(--tekst-tiho);
}

/* =========================================================
   Nutritivna tabela
   ========================================================= */

/* Nastavak deklaracije, ne zasebna kartica — ista sirina i isti razmaci,
   pa traka izgleda kao poslednji red iste tabele. */
.nutritivna {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.nutritivna h3 {
  margin-bottom: 0.9rem;
  font-family: var(--ff-telo);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

/* Nutritivnih stavki ima sedam — u mrezi od cetiri kolone poslednji red bi
   uvek zjapio. Flex resava: stavke u poslednjem redu narastu i popune sirinu. */
.nutritivna__mreza {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  border-top: 1px solid var(--linija);
}

/* Naziv se ponegde prelama u dva reda; bez ovoga bi vrednosti stajale na
   razlicitim visinama. Celije su iste visine, pa vrednost ide na dno. */
.nutritivna__mreza > div {
  flex: 1 1 9.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 1rem 2rem 1rem 0;
  border-bottom: 1px solid var(--linija);
}

.nutritivna__mreza dt {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.nutritivna__mreza dd {
  margin: 0;
  font-size: 1.02rem;
  color: var(--tekst);
  font-variant-numeric: tabular-nums;
}

/* podstavke (— od kojih šećeri) stoje tiše od svoje nadstavke */
.nutritivna__pod dd {
  color: var(--tekst-tiho);
  font-size: 0.94rem;
}

.nutritivna__izvor {
  margin-top: 1rem;
  font-size: 0.74rem;
  color: var(--tekst-tisi);
}

/* =========================================================
   Snimci sa gazdinstva
   ========================================================= */

.snimci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.snimak {
  margin: 0;
}

/* snimci su 16:9 — svaki drugi odnos bi im odsekao stranice */
.snimak video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--pozadina-2);
  border: 1px solid var(--linija);
}

.snimak figcaption {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

/* =========================================================
   Koraci bez slika
   ========================================================= */

.koraci--tekst {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.korak-tekst {
  padding-top: 1.5rem;
  border-top: 2px solid var(--akcenat);
}

.korak-tekst__broj {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--ff-naslov);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--akcenat);
}

.korak-tekst h3 {
  margin-bottom: 0.6rem;
  font-size: 1.3rem;
}

.korak-tekst p {
  font-size: 0.92rem;
  color: var(--tekst-tiho);
}

/* =========================================================
   Prelaz na drugi ukus
   ========================================================= */

.prelaz {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--pozadina);
  color: var(--tekst);
  border-top: 1px solid var(--linija);
}

.prelaz__red {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.prelaz__slika {
  position: relative;
  flex: 0 0 clamp(150px, 22vw, 230px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.prelaz__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prelaz__telo {
  flex: 1 1 300px;
}

.prelaz__telo .svet__ime {
  margin-bottom: 0.75rem;
}

/* =========================================================
   Priča
   ========================================================= */

.prica {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

.prica__slika {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.prica__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.citat {
  margin: 2rem 0;
  padding-left: 1.75rem;
  border-left: 2px solid var(--akcenat);
  font-family: var(--ff-naslov);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  font-style: italic;
}

.prica__potpis {
  margin-top: 1.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.brojke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem;
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--linija);
}

.brojka strong {
  display: block;
  font-family: var(--ff-naslov);
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  color: var(--akcenat);
}

.brojka span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tekst-tiho);
}

/* =========================================================
   Proces
   ========================================================= */

.koraci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.korak__slika {
  position: relative;
  aspect-ratio: 3 / 4;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.korak__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.korak:hover .korak__slika img {
  transform: scale(1.06);
}

.korak__broj {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.6rem 1.1rem;
  background: var(--pozadina);
  font-family: var(--ff-naslov);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--akcenat);
}

.korak h3 {
  margin-bottom: 0.7rem;
  font-size: 1.35rem;
}

.korak p {
  font-size: 0.92rem;
  color: var(--tekst-tiho);
}

/* =========================================================
   Galerija
   ========================================================= */

.galerija {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.galerija__stavka {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: var(--pozadina-2);
  cursor: zoom-in;
}

/* Natpis je pravi tekst na strani, ne samo alt — zato stoji u DOM-u i vidi se
   na prelaz preko slike, a na dodirnim ekranima uvek. */
.galerija__natpis {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1rem 0.9rem;
  font-family: var(--ff-telo);
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: left;
  color: #f2eee9;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.85), transparent);
  opacity: 0;
  transition: opacity var(--prelaz);
}

.galerija__stavka:hover .galerija__natpis,
.galerija__stavka:focus-visible .galerija__natpis {
  opacity: 1;
}

@media (hover: none) {
  .galerija__natpis {
    opacity: 1;
  }
}

.galerija__stavka:nth-child(1),
.galerija__stavka:nth-child(8) {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1;
}

/* sest slika na stranicama ukusa — bez uvecanih polja */
.galerija--sest {
  grid-template-columns: repeat(3, 1fr);
}

.galerija--sest .galerija__stavka:nth-child(1),
.galerija--sest .galerija__stavka:nth-child(8) {
  grid-column: span 1;
  grid-row: span 1;
}

/* zid na stranici galerije: ujednacena polja jer se filtriranjem menja redosled,
   pa bi uvecana polja skakala */
.galerija--zid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}

.galerija--zid .galerija__stavka:nth-child(1),
.galerija--zid .galerija__stavka:nth-child(8) {
  grid-column: span 1;
  grid-row: span 1;
  aspect-ratio: 1;
}

.galerija__stavka[hidden] {
  display: none;
}

/* filter */
.galerija-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.galerija-filter button {
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--linija-jaka);
  border-radius: 999px;
  background: transparent;
  color: var(--tekst-tiho);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--prelaz), color var(--prelaz), border-color var(--prelaz);
}

.galerija-filter button:hover {
  color: var(--tekst);
  border-color: var(--tekst);
}

.galerija-filter button[aria-pressed="true"] {
  background: var(--akcenat);
  border-color: var(--akcenat);
  color: #fff;
}

.galerija__stavka img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1), opacity var(--prelaz);
}

.galerija__stavka:hover img {
  transform: scale(1.07);
  opacity: 0.82;
}

/* svetlosna kutija */
.kutija {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 6, 7, 0.94);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--prelaz);
}

.kutija.otvorena {
  opacity: 1;
  pointer-events: auto;
}

.kutija img {
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
}

.kutija__opis {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: rgba(242, 238, 233, 0.6);
}

.kutija__zatvori,
.kutija__strelica {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(242, 238, 233, 0.25);
  border-radius: 50%;
  background: transparent;
  color: #f2eee9;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background var(--prelaz);
}

.kutija__zatvori:hover,
.kutija__strelica:hover {
  background: rgba(242, 238, 233, 0.14);
}

.kutija__zatvori {
  top: 1.5rem;
  right: 1.5rem;
}

.kutija__strelica--nazad {
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.kutija__strelica--napred {
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* =========================================================
   Kontakt
   ========================================================= */

.kontakt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.kontakt__stavke {
  display: grid;
  gap: 1.6rem;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}

.kontakt__stavka {
  display: grid;
  gap: 0.3rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--linija);
}

.kontakt__oznaka {
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.kontakt__vrednost {
  font-family: var(--ff-naslov);
  font-size: 1.35rem;
  transition: color var(--prelaz);
}

a.kontakt__vrednost:hover {
  color: var(--akcenat);
}

/* forma */
.polje {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.2rem;
}

.polje label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tekst-tiho);
}

.polje input,
.polje textarea,
.polje select {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  background: var(--pozadina-2);
  font-size: 0.95rem;
  transition: border-color var(--prelaz), background var(--prelaz);
}

.polje input:focus,
.polje textarea:focus,
.polje select:focus {
  outline: none;
  border-color: var(--akcenat);
}

.polje textarea {
  min-height: 130px;
  resize: vertical;
}

.polje-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.poruka-forme {
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--akcenat);
  background: var(--pozadina-2);
  font-size: 0.9rem;
}

.poruka-forme--uspeh {
  border-left-color: var(--brend-zelena);
}

.poruka-forme[hidden] {
  display: none;
}

/* =========================================================
   Korpa (fioka)
   ========================================================= */

.zastor {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(6, 6, 7, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--prelaz);
}

.zastor.vidljiv {
  opacity: 1;
  pointer-events: auto;
}

.fioka {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: min(100%, 430px);
  display: flex;
  flex-direction: column;
  background: var(--pozadina);
  color: var(--tekst);
  border-left: 1px solid var(--linija);
  transform: translateX(100%);
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fioka.otvorena {
  transform: translateX(0);
}

.fioka__vrh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--linija);
}

.fioka__naslov {
  font-family: var(--ff-naslov);
  font-size: 1.5rem;
}

.fioka__zatvori {
  width: 38px;
  height: 38px;
  border: 1px solid var(--linija);
  border-radius: 50%;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--prelaz);
}

.fioka__zatvori:hover {
  background: var(--pozadina-2);
}

.fioka__telo {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.fioka__prazna {
  display: grid;
  gap: 1rem;
  place-items: center;
  padding-block: 4rem;
  text-align: center;
  color: var(--tekst-tiho);
}

.stavka {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--linija);
}

.stavka img {
  width: 68px;
  height: 84px;
  object-fit: cover;
  background: var(--pozadina-2);
}

.stavka__ime {
  font-family: var(--ff-naslov);
  font-size: 1.15rem;
  line-height: 1.2;
}

.stavka__pod {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst-tisi);
}

.stavka__cena {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--tekst-tiho);
}

.brojac {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid var(--linija);
  border-radius: var(--radius);
}

.brojac button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: color var(--prelaz);
}

.brojac button:hover {
  color: var(--akcenat);
}

.brojac span {
  min-width: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.fioka__dno {
  padding: 1.5rem;
  border-top: 1px solid var(--linija);
  background: var(--pozadina-2);
}

.zbir {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  color: var(--tekst-tiho);
}

.zbir--ukupno {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linija);
  font-family: var(--ff-naslov);
  font-size: 1.5rem;
  color: var(--tekst);
}

.besplatna-napomena {
  margin-bottom: 1rem;
  font-size: 0.76rem;
  color: var(--brend-zelena);
}

/* =========================================================
   Podnožje
   ========================================================= */

.podnozje {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  background: #060607;
  color: rgba(242, 238, 233, 0.72);
  border-top: 1px solid rgba(242, 238, 233, 0.1);
}

.podnozje__mreza {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: clamp(1.6rem, 3.5vw, 3rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(242, 238, 233, 0.1);
}

.podnozje__naslov {
  margin-bottom: 1.25rem;
  font-family: var(--ff-telo);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 238, 233, 0.45);
}

.podnozje ul {
  display: grid;
  gap: 0.7rem;
  list-style: none;
  padding: 0;
  font-size: 0.9rem;
}

.podnozje a:hover {
  color: #f2eee9;
}

.podnozje__znak {
  margin-bottom: 1.25rem;
}

.podnozje__znak img {
  width: 78px;
}

.podnozje__adresa {
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1.7;
  /* Podnozje je uvek tamno, bez obzira na temu strane. Promenljiva --tekst-tisi
     na svetloj temi daje tamno slovo na crnoj podlozi — nevidljivo. */
  color: rgba(242, 238, 233, 0.55);
}

/* telefon u adresi mora da bude meta od bar 44px za prst */
.podnozje__adresa a {
  display: inline-block;
  padding-block: 0.7rem;
}

.podnozje__opis {
  max-width: 34ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(242, 238, 233, 0.55);
}

.podnozje__dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  font-size: 0.76rem;
  color: rgba(242, 238, 233, 0.42);
}

.podnozje__dno a:hover {
  color: #f2eee9;
}

.podnozje__autor {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(242, 238, 233, 0.09);
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(242, 238, 233, 0.3);
}

.podnozje__autor a {
  color: rgba(242, 238, 233, 0.55);
  letter-spacing: 0.1em;
}

.podnozje__autor a:hover {
  color: #f2eee9;
}

/* =========================================================
   Pravne stranice
   ========================================================= */

.pravno {
  max-width: 74ch;
  padding-top: 9rem;
}

.pravno h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.pravno h2:first-of-type {
  margin-top: 2.5rem;
}

.pravno h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-family: var(--ff-telo);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pravno p,
.pravno li {
  margin-bottom: 0.9rem;
  color: var(--tekst-tiho);
}

.pravno ul {
  padding-left: 1.25rem;
}

.pravno dl {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.pravno dt {
  color: var(--tekst-tisi);
}

.pravno dd {
  margin: 0;
}

.dopuniti {
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  background: rgba(225, 29, 36, 0.16);
  color: var(--akcenat);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.82em;
  letter-spacing: 0.02em;
}

.upozorenje {
  margin-bottom: 2.5rem;
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--brend-narandzasta);
  background: var(--pozadina-2);
  font-size: 0.92rem;
  color: var(--tekst-tiho);
}

.upozorenje strong {
  color: var(--tekst);
}

/* obrazac za odustanak — linije za rucno popunjavanje, citljive i na stampi */
.obrazac {
  margin: 1.75rem 0 2.5rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--linija);
  background: var(--pozadina-2);
}

.obrazac p {
  margin-bottom: 0.4rem;
}

/* Linija za popunjavanje je crta, ne niz donjih crta — niz se ne prelama,
   pa se na telefonu secao na pola. Ovako je i za stampu urednija. */
.obrazac__linija {
  height: 1.5rem;
  margin: 0.3rem 0 1.5rem;
  border-bottom: 1px solid var(--linija);
}

.polje__pod {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--tekst-tisi);
}

/* potvrda uslova u korpi — kvadratic i tekst jedan pored drugog */
.polje-potvrda {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  margin: 1.5rem 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--tekst-tiho);
}

.polje-potvrda input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--akcenat);
}

.polje-potvrda a {
  color: var(--tekst);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================
   Otkrivanje pri skrolu
   ========================================================= */

.otkrij {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.otkrij.vidljiv {
  opacity: 1;
  transform: none;
}

/* =========================================================
   Responzivno
   ========================================================= */

@media (max-width: 980px) {
  .hero-ukus {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-ukus__tekst {
    order: 2;
    padding: clamp(2.5rem, 6vw, 4rem) 0;
  }

  .hero-ukus__tekst .omotac-uzi {
    width: min(100% - 2.5rem, 620px);
    margin-inline: auto;
  }

  .hero-ukus__slika {
    order: 1;
    height: min(70svh, 520px);
    margin-top: 4.5rem;
  }
}

@media (max-width: 980px) {
  /* filteri idu iznad mreze kao vodoravna traka */
  .prodavnica-raspored {
    grid-template-columns: 1fr;
  }

  .filteri {
    position: static;
    gap: 1.25rem;
  }

  .filteri__grupa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .filteri__grupa h2 {
    flex: 1 1 100%;
    margin-bottom: 0;
  }

  .filteri__grupa button {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--linija-jaka);
    border-radius: 999px;
    white-space: nowrap;
  }

  .filteri__grupa button[aria-pressed="true"] {
    background: var(--akcenat);
    border-color: var(--akcenat);
    color: #fff;
  }

  .filteri__poziv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }

  .filteri__poziv h2 { flex: 1 1 100%; margin: 0; }
  .filteri__poziv p { flex: 1 1 240px; margin: 0; }
  .filteri__poziv .dugme { width: auto; }

  .proizvod {
    grid-template-columns: 1fr;
  }

  .proizvod__slika {
    min-height: min(62svh, 460px);
    margin-top: 4.5rem;
  }

  .proizvod__telo {
    padding: clamp(2rem, 5vw, 3rem) 0;
  }

  .proizvod__telo .omotac-uzi {
    width: min(100% - 2.5rem, 620px);
    margin-inline: auto;
  }

  .korpa-strana {
    grid-template-columns: 1fr;
  }

  .korpa-strana__zbir {
    position: static;
  }
}

@media (max-width: 900px) {
  .prica,
  .kontakt,
  .poziv {
    grid-template-columns: 1fr;
  }

  .oznake__niz,
  .kartice {
    grid-template-columns: 1fr 1fr;
    row-gap: 2.5rem;
  }

  /* Mozaik u dve kolone: fotografije preko cele sirine, cinjenice u parovima. */
  .znali {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }

  /* :nth-child(n) hvata sve, a ima istu tezinu kao :nth-child(1) — obican
     `> *` bi bio slabiji i izricito postavljanje sa desktopa bi ostalo. */
  .znali > :nth-child(n) { grid-area: auto; }
  .znali > :nth-child(1),
  .znali > :nth-child(8) { grid-column: 1 / -1; }

  .znali__foto {
    aspect-ratio: 16 / 9;
  }

  /* Treci stub otvara novi red, pa mu leva linija nema sta da razdvaja. */
  .oznaka + .oznaka::before {
    content: none;
  }

  .oznaka:nth-child(even)::before {
    content: '';
  }

  .korpa-red {
    grid-template-columns: 72px 1fr;
  }

  .korpa-red__desno {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    justify-items: center;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 0.9rem;
    border-top: 1px solid var(--linija);
  }

  .sastavljac__dno {
    flex-direction: column;
    align-items: stretch;
  }

  .sastavljac__cena {
    justify-content: space-between;
  }

  .poziv__slika {
    aspect-ratio: 16 / 9;
  }

  .galerija--sest {
    grid-template-columns: repeat(2, 1fr);
  }


  .prica__slika {
    aspect-ratio: 3 / 2;
  }

  .svetovi {
    grid-template-columns: 1fr;
  }

  .svet {
    min-height: auto;
  }

  .paket {
    grid-template-columns: 1fr;
  }

  .galerija {
    grid-template-columns: repeat(2, 1fr);
  }

  .galerija__stavka:nth-child(1),
  .galerija__stavka:nth-child(8) {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 3 / 2;
  }

  .podnozje__mreza {
    grid-template-columns: 1fr 1fr;
  }

  .podnozje__mreza > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  /* Dve kolone ovde daju stubove od ~175px — tekst se lomi na po tri reci. */
  .oznake__niz,
  .kartice {
    grid-template-columns: 1fr;
    row-gap: 2.25rem;
  }

  .znali {
    grid-template-columns: 1fr;
  }

  .oznaka + .oznaka::before,
  .oznaka:nth-child(even)::before {
    content: none;
  }

  .oznaka + .oznaka {
    padding-top: 2.25rem;
    border-top: 1px solid var(--linija);
  }

  .meni-dugme {
    display: grid;
    place-items: center;
  }

  /* Meni je position: fixed unutar zaglavlja. Element sa backdrop-filter
     postaje containing block za fiksirane potomke, pa bi se meni rastegao
     preko zaglavlja (390x160) umesto preko ekrana — linkovi ispadaju iznad
     kutije, a podloga se boji samo preko trake. Zato zaglavlju gasimo
     zamucenje dok je meni otvoren; iza njega je ionako pun ekran. */
  .meni-otvoren .zaglavlje {
    backdrop-filter: none;
    background: transparent;
    border-color: transparent;
  }

  .navigacija {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: 5rem 2rem;
    /* neprozirno i uvek tamno — natpisi u meniju su svetli i na temi jagode */
    background: #0a0a0b;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--prelaz);
  }

  .meni-otvoren .navigacija {
    z-index: 90;
    opacity: 1;
    pointer-events: auto;
  }

  /* Logo i dugmad ostaju iznad menija, inace se X ne moze kliknuti. */
  .zaglavlje .znak,
  .zaglavlje__alati {
    position: relative;
    z-index: 95;
  }

  /* Bez ovoga strana ispod menija nastavlja da se skroluje pod prstom. */
  .meni-otvoren {
    overflow: hidden;
  }

  .navigacija a {
    font-size: 1rem;
    letter-spacing: 0.2em;
  }

  .korpa-dugme span:not(.korpa-dugme__broj) {
    display: none;
  }

  .korpa-dugme {
    padding: 0.7rem 0.9rem;
  }

  /* na uskom ekranu nema mesta za bocni gradijent — sve tezi nadole */
  .hero__veo {
    background: linear-gradient(to top,
      rgba(8, 8, 9, 0.96) 0%,
      rgba(8, 8, 9, 0.88) 30%,
      rgba(8, 8, 9, 0.5) 62%,
      rgba(8, 8, 9, 0.6) 100%);
  }

  .hero__nogica {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .hero__skrol {
    display: none;
  }

  .polje-par {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .podnozje__mreza {
    grid-template-columns: 1fr;
  }

  .brojke {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   Uzak telefon (360–560 px)
   ========================================================= */

@media (max-width: 560px) {
  /* Slika, naziv i brojac u jednom redu ne stanu — naziv se stisne na 60 px
     i kartica pocne da sece sopstveni sadrzaj. Brojac ide u drugi red. */
  .sastavljac__ukus {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: center;
    gap: 0 1rem;
    padding: 0 1rem 0.9rem 0;
  }

  .sastavljac__ukus img {
    width: 88px;
    height: 100%;
    min-height: 88px;
    grid-row: 1 / 3;
  }

  .sastavljac__ukus-telo {
    padding-block: 0.9rem 0.5rem;
  }

  .sastavljac__ukus .brojac {
    justify-self: start;
  }

  /* Mete za prst. 30 px je premalo za dugmice kojima se bira kolicina —
     to je glavna radnja u sastavljacu i na stranici paketa. */
  .brojac button {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }

  /* Pravne veze u dnu su bile visoke 15 px; padding im daje povrsinu
     a da se razmak izmedju njih ne izgubi. */
  .podnozje__dno a,
  .podnozje__autor a {
    display: inline-block;
    padding: 0.45rem 0;
  }

  .paket-kartica__veza,
  .paket-kartica h3 a {
    display: inline-block;
    padding: 0.45rem 0;
  }

  .veza-strelica {
    padding-top: 0.45rem;
    padding-bottom: 0.5rem;
  }

  /* 9,3 px je premalo za razmaknuta verzalna slova ispod znaka */
  .znak__pod {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
  }

  /* Meta od 20 px za uklanjanje kutije je premala za prst */
  .korpa-red [data-skini] {
    padding: 0.5rem 0;
  }

  .korpa-red h3 a {
    display: inline-block;
    padding: 0.35rem 0;
  }

  /* Kvadratic za potvrdu uslova je bio 17 px — mali i za oko i za prst */
  .polje-potvrda input {
    width: 1.35rem;
    height: 1.35rem;
  }

  /* Dve kolone od 9 rem ne stanu u 360 px, pa je vrednost izlazila preko ivice */
  .pravno dl {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pravno dt {
    margin-top: 1rem;
  }

  .pravno dd {
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   Najuzi telefoni (do 420 px)
   ========================================================= */

@media (max-width: 420px) {
  /* Kad u korpi ima nesto, znacka sa brojem prosiri dugme korpe i dugme menija
     ispadne 15 px van ekrana. Podnaslov ispod znaka je ukras — na ovoj sirini
     se sklanja da bi meni ostao ceo. */
  .znak__pod {
    display: 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;
  }

  .otkrij {
    opacity: 1;
    transform: none;
  }

  /* globalno skracivanje animacija bi ovde sakrilo sve kadrove — ostaje prvi */
  .hero-ukus__slika img {
    animation: none !important;
    opacity: 0;
  }

  .hero-ukus__slika img:first-child {
    opacity: 1;
  }
}