/* Ana Raw – stranica za kupce. Boje i slova kao na cenovniku i letku. */
:root {
  --pozadina: #f6f0e3;
  --papir: #fffdf8;
  --ivica: #e4d5bb;
  --ivica-jaka: #d9c9ad;
  --tekst: #2b2420;
  --tekst-2: #6a5d54;
  --sljiva: #5e1f5b;
  --sljiva-tamna: #4a1848;
  --zelena: #4d5a2c;
  --zlatna: #b08d57;
  --alergen: #7a4a12;
  --alergen-poz: #f6e7cf;
  --greska: #a03434;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--pozadina); color: var(--tekst);
  font: 15px/1.5 Mulish, system-ui, -apple-system, sans-serif;
}
a { color: var(--sljiva); }
img { max-width: 100%; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .6; }
:focus-visible { outline: 2px solid var(--sljiva); outline-offset: 2px; }

.strana { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(110px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.ucitavanje { min-height: 60vh; display: grid; place-items: center; color: var(--tekst-2); padding: 24px; text-align: center; }

/* zaglavlje */
.zaglavlje { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; text-align: center; }
.zaglavlje .logo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 1px solid #d9c3a0; display: block; }
.zaglavlje.malo .logo { width: 96px; height: 96px; }
.zaglavlje h1 { margin: 6px 0 0; font: 600 30px/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: 6px; text-transform: uppercase; color: var(--zelena); }
.crta { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; }
.crta span { flex: 1; height: 1px; background: #c9ab7c; }
.uvod { margin: 0; font-size: 14px; color: var(--tekst-2); }
.oznake { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.oznake span { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--zelena); border: 1px solid #b9a37a; border-radius: 999px; padding: 5px 10px; }
.moje { margin: 0; text-align: center; font-size: 13.5px; background: var(--papir); border: 1px solid var(--ivica); border-radius: 12px; padding: 10px; }

/* torte */
.torte { display: flex; flex-direction: column; gap: 18px; }
.torta { background: var(--papir); border: 1px solid var(--ivica); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 18px rgba(94, 31, 91, .06); }
.torta > img, .torta .bez-slike, .torta > .slika-dugme img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.torta .bez-slike { display: grid; place-items: center; background: #efe3cc; font: 600 28px 'Cormorant Garamond', serif; color: var(--sljiva); }
.torta .telo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.naslov-red { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.torta h2 { margin: 0; font: 700 27px/1.1 'Cormorant Garamond', Georgia, serif; color: var(--sljiva); }
.od { font-size: 12.5px; color: var(--tekst-2); white-space: nowrap; }
.opis { margin: 0; font-size: 14.5px; color: #4a3f38; }
.alergeni { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--tekst-2); }
.alergen { font-weight: 700; color: var(--alergen); background: var(--alergen-poz); border-radius: 6px; padding: 3px 8px; }
.sastav { margin: 0; font-size: 13px; color: var(--tekst-2); }
.link { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--zelena); font-weight: 700; font-size: 13px; }
.velicine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.velicina { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; min-height: 52px; border-radius: 10px; border: 1px solid var(--ivica-jaka); background: #fff; color: var(--tekst); font-size: 12.5px; }
.velicina strong { font-size: 14px; }
.velicina.izabrana { background: var(--sljiva); border-color: var(--sljiva); color: #fff; }
.dodavanje { display: flex; gap: 10px; align-items: center; }
.dodavanje .dugme { flex: 1; }
.brojac { display: flex; align-items: center; border: 1px solid var(--ivica-jaka); border-radius: 12px; background: #fff; }
.brojac button { width: 44px; height: 44px; border: 0; background: none; color: var(--sljiva); font-size: 20px; }
.brojac span, .brojac strong { min-width: 22px; text-align: center; font-weight: 700; }
.brojac.malo button { width: 36px; height: 36px; font-size: 18px; }

/* dugmad */
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--ivica-jaka); background: #fff; color: var(--tekst); font-weight: 700; text-decoration: none; }
.dugme.glavno { background: var(--sljiva); border-color: var(--sljiva); color: #fff; }
.dugme.zeleno { background: var(--zelena); border-color: var(--zelena); color: #fff; }
.dugme.svetlo { background: #fbf3e4; border-color: #fbf3e4; color: var(--sljiva); }
.dugme.veliko { min-height: 54px; font-size: 17px; box-shadow: 0 10px 24px rgba(94, 31, 91, .28); }
.dugmad { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* traka korpe */
.traka-korpe { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); max-width: 536px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; background: var(--sljiva); color: #fff; border-radius: 16px; padding: 10px 10px 10px 16px;
  box-shadow: 0 10px 24px rgba(94, 31, 91, .35); z-index: 5; }
.traka-korpe span { flex: 1; font-size: 13px; line-height: 1.35; }
.traka-korpe strong { font-size: 17px; }

/* korpa */
.gornji-red { display: flex; align-items: center; justify-content: space-between; }
.nazad { font-weight: 700; text-decoration: none; }
.logo.mali { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid #d9c3a0; }
.naslov { margin: 0; font: 600 32px/1.15 'Cormorant Garamond', Georgia, serif; color: var(--sljiva); }
.stanje .naslov { text-align: center; }
.blok { background: var(--papir); border: 1px solid var(--ivica); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.blok h2 { margin: 0; font: 600 22px/1.2 'Cormorant Garamond', Georgia, serif; color: var(--zelena); }
.blok p { margin: 0; }
.stavka { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.stavka + .stavka { border-top: 1px solid #efe4d1; padding-top: 12px; }
.stavka img, .stavka .sl { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: #efe3cc; flex: 0 0 52px; }
.stavka .ime { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.stavka .iznos { width: 62px; text-align: right; font-weight: 700; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--tekst-2); }
input, textarea { font: inherit; font-size: 16px; color: var(--tekst); padding: 11px 12px; border: 1px solid var(--ivica-jaka); border-radius: 10px; background: #fff; width: 100%; min-height: 46px; }
textarea { resize: vertical; }
.neobavezno { color: #9a8c80; }
.dva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.izbor button { min-height: 52px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--ivica-jaka); background: #fff; color: var(--tekst); font-size: 14px; line-height: 1.3; }
.izbor button.izabrano { background: var(--sljiva); border-color: var(--sljiva); color: #fff; font-weight: 700; }
.izbor button.izabrano .sitno { color: #f2e6f1; }
.napomena-dostave { font-size: 13.5px; font-weight: 700; color: var(--zelena); }
.napomena-dostave.nepoznato { color: var(--alergen); font-weight: 600; }
.zbir > div { display: flex; justify-content: space-between; font-size: 14.5px; }
.zbir .ukupno { border-top: 1px solid var(--ivica); padding-top: 10px; font-size: 18px; font-weight: 700; color: var(--sljiva); }
.greska { color: var(--greska); font-weight: 600; background: #fbecec; border-radius: 10px; padding: 10px 12px; margin: 0; }
.sitno { font-size: 12.5px; color: var(--tekst-2); }
.centar { text-align: center; }
.prazno { color: var(--tekst-2); text-align: center; }

/* stanje */
.koraci { list-style: none; padding: 0; margin: 4px 0; display: flex; justify-content: space-between; gap: 6px; }
.koraci li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tekst-2); }
.koraci .tacka { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ivica-jaka); display: grid; place-items: center; font-weight: 700; }
.koraci li.gotovo { color: var(--zelena); font-weight: 700; }
.koraci li.gotovo .tacka { background: var(--zelena); border-color: var(--zelena); color: #fff; }
.spisak { list-style: none; padding: 0; margin: 0; }
.spisak li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14.5px; }
.spisak .ukupno { border-top: 1px solid var(--ivica); margin-top: 6px; padding-top: 8px; font-weight: 700; color: var(--sljiva); }

.podnozje { text-align: center; font-size: 13px; color: var(--tekst-2); line-height: 1.7; padding: 8px 0; }
.pauza { margin: 0; text-align: center; font-weight: 700; color: var(--sljiva); background: #f4e8f3; border: 1px solid #dcc2da; border-radius: 12px; padding: 12px; }
.uvod { white-space: pre-line; }
.galerija { position: relative; }
.galerija .traka { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galerija .traka::-webkit-scrollbar { display: none; }
.galerija .traka img { flex: 0 0 100%; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; scroll-snap-align: center; display: block; cursor: zoom-in; }
.galerija .tacke { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.galerija .tacke span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 0 2px rgba(0,0,0,.4); }
.galerija .tacke span.aktivna { background: #fff; }

.slika-dugme { display: block; padding: 0; border: 0; background: none; width: 100%; cursor: zoom-in; }
.uvecano { position: fixed; inset: 0; z-index: 20; background: rgba(20, 12, 18, .92); display: flex; align-items: center; justify-content: center; padding: 12px; }
.uvecano img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.uvecano button { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-size: 20px; }