/* ===== Velbura ===== */
:root {
  --bg: #F3F0EA;          /* nebo nakon bure */
  --bg-2: #E9E5DD;        /* svijetli kamen */
  --povrsina: #FBFAF7;
  --tinta: #17130F;       /* espresso */
  --tinta-2: #4A4540;
  --tinta-3: #7C766F;
  --rub: rgba(23, 19, 15, .12);
  --rub-jak: rgba(23, 19, 15, .24);
  --more: #98111E;        /* ruby red */
  --more-svj: #B8202F;
  --krema: #A9764A;       /* crema */
  --tamna-sek: #17130F;
  --tamna-sek-tinta: #EEE8DF;
  --tamna-sek-tinta-2: #A79F95;
  --tamna-sek-povrsina: #221D19;
  --tamna-sek-rub: rgba(238, 232, 223, .12);
  --planina-1: #D9D4CA;
  --planina-2: #CBC4B8;
  --uspjeh: #2F6B4A;
  --greska: #A23B2A;
  --sjena: 0 1px 2px rgba(23,19,15,.06), 0 12px 32px -12px rgba(23,19,15,.22);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: var(--sans);
  --r: 14px;
  --wrap: 1200px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0F0D0C;
  --bg-2: #171412;
  --povrsina: #1B1715;
  --tinta: #EEE8DF;
  --tinta-2: #BDB5AA;
  --tinta-3: #8A837A;
  --rub: rgba(238, 232, 223, .10);
  --rub-jak: rgba(238, 232, 223, .22);
  --more: #98111E;
  --more-svj: #A9CBE8;
  --krema: #D4A574;
  --tamna-sek: #15110F;
  --tamna-sek-povrsina: #201B18;
  --planina-1: #1C1916;
  --planina-2: #24201C;
  --uspjeh: #7FC39C;
  --greska: #E58A78;
  --sjena: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tinta);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
body.bez-pomaka { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--krema); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.uzak { max-width: 820px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--tinta); color: var(--bg); padding: 8px 14px; z-index: 100; border-radius: 8px; }
.skip:focus { left: 8px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; margin: 0; }
h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h3 { font-size: 1.5rem; }
p { margin: 0; }

.nadnaslov {
  font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--krema); margin-bottom: 14px;
}
.uvod { color: var(--tinta-2); font-size: 1.08rem; max-width: 560px; margin-top: 16px; }

/* ----- gumbi ----- */
.gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em; text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gumb:active { transform: translateY(1px); }
.gumb--glavni { background: var(--tinta); color: var(--bg); }
.gumb--glavni:hover { background: var(--more); color: #fff; }
:root[data-theme="dark"] .gumb--glavni:hover { color: #0F0D0C; }
.gumb--obrub { border-color: var(--rub-jak); background: transparent; }
.gumb--obrub:hover { border-color: var(--tinta); }
.gumb--mali { min-height: 38px; padding: 0 18px; font-size: .85rem; background: var(--tinta); color: var(--bg); }
.gumb--mali:hover:not(:disabled) { background: var(--krema); color: #17130F; }
.gumb--mali:disabled { opacity: .35; cursor: not-allowed; }
.gumb--siroki { width: 100%; }
.gumb--tekst { background: none; border: 0; color: var(--tinta-3); min-height: 40px; padding: 0; width: 100%; }
.gumb--tekst:hover { color: var(--tinta); }
.gumb:disabled { opacity: .5; cursor: wait; }

.ikona-gumb {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  display: inline-grid; place-items: center; background: transparent; border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.ikona-gumb:hover { background: var(--bg-2); border-color: var(--rub); }
.ikona-gumb svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ----- najava i zaglavlje ----- */
.najava {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  padding: 9px 16px; background: var(--tinta); color: var(--bg);
  font-size: .8rem; letter-spacing: .02em; text-align: center;
}
.najava a { color: var(--krema); text-decoration: none; font-weight: 600; }
:root[data-theme="dark"] .najava { background: var(--more); color: #0F0D0C; }
:root[data-theme="dark"] .najava a { color: #0F0D0C; text-decoration: underline; }

.zaglavlje {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease, background-color .35s ease;
}
.zaglavlje.je-pomaknuto { border-bottom-color: var(--rub); }
.zaglavlje__in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo__znak { width: 30px; height: 30px; color: var(--more); }
.logo__rijec { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; letter-spacing: .28em; padding-left: 2px; }
.nav { display: none; gap: 34px; }
.nav a { text-decoration: none; font-size: .9rem; font-weight: 500; color: var(--tinta-2); position: relative; }
.nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: var(--krema); transition: right .25s ease; }
.nav a:hover { color: var(--tinta); }
.nav a:hover::after { right: 0; }
.zaglavlje__akcije { display: flex; align-items: center; gap: 2px; }

.i-mjesec { display: none !important; }
:root[data-theme="dark"] .i-sunce { display: none !important; }
:root[data-theme="dark"] .i-mjesec { display: block !important; }

.brojac {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--krema); color: #17130F;
  font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}
.brojac.je-skok { animation: skok .45s ease; }
@keyframes skok { 40% { transform: scale(1.35); } }

.mob-nav { display: flex; flex-direction: column; padding: 4px 16px 16px; border-bottom: 1px solid var(--rub); }
.mob-nav[hidden] { display: none; }
.mob-nav a { padding: 14px 4px; text-decoration: none; font-family: var(--serif); font-size: 1.5rem; border-bottom: 1px solid var(--rub); }
.mob-nav a:last-child { border-bottom: 0; }

@media (min-width: 900px) {
  .nav { display: flex; }
  .meni-gumb { display: none; }
  .mob-nav { display: none !important; }
}

/* ----- hero ----- */
.hero { position: relative; overflow: hidden; padding: 72px 0 120px; min-height: min(86vh, 760px); display: flex; align-items: center; }
.hero__in { position: relative; z-index: 2; }
.hero__naslov { font-size: clamp(3.4rem, 11vw, 7.6rem); line-height: .92; letter-spacing: -.02em; }
.hero__naslov em { font-style: italic; color: var(--more); font-weight: 500; }
.hero__tekst { margin-top: 28px; font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--tinta-2); max-width: 520px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__brojke { display: flex; flex-wrap: wrap; gap: 20px 44px; margin: 56px 0 0; }
.hero__brojke div { border-left: 1px solid var(--rub-jak); padding-left: 14px; }
.hero__brojke dt { font-family: var(--mono); font-size: 1.05rem; font-weight: 500; }
.hero__brojke dd { margin: 2px 0 0; font-size: .8rem; color: var(--tinta-3); }

.hero__art {
  position: absolute; z-index: 1; right: max(24px, calc((100vw - var(--wrap)) / 2)); top: 50%; transform: translateY(-56%);
  width: min(40vw, 540px); aspect-ratio: 1; color: var(--tinta); opacity: .9; pointer-events: none; display: none;
}
.hero__art svg { width: 100%; height: 100%; }
.hero__art .a { stroke: var(--krema); }
.hero__art::before {
  content: ''; position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212,165,116,.22), transparent);
}
@media (min-width: 1100px) { .hero__art { display: block; } }
.hero__planina { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; z-index: 0; }
.pl-1 { fill: var(--planina-1); transition: fill .35s ease; }
.pl-2 { fill: var(--planina-2); transition: fill .35s ease; }
.hero__vjetar { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__vjetar span {
  position: absolute; right: -40%; height: 1px; width: 38%;
  background: linear-gradient(90deg, transparent, var(--more) 40%, transparent);
  opacity: 0; animation: bura 7s linear infinite;
}
.hero__vjetar span:nth-child(1) { top: 22%; animation-delay: 0s; }
.hero__vjetar span:nth-child(2) { top: 34%; animation-delay: 1.6s; width: 26%; }
.hero__vjetar span:nth-child(3) { top: 46%; animation-delay: 3.1s; }
.hero__vjetar span:nth-child(4) { top: 15%; animation-delay: 4.4s; width: 20%; }
.hero__vjetar span:nth-child(5) { top: 58%; animation-delay: 5.6s; width: 30%; }
@keyframes bura {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: .5; }
  70% { opacity: .35; }
  100% { transform: translateX(-380%); opacity: 0; }
}

/* ----- sekcije ----- */
.sekcija { padding: 96px 0; }
@media (max-width: 719px) { .sekcija { padding: 72px 0; } }
.sekcija__glava { margin-bottom: 44px; }
.sekcija__glava--red { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }

.sekcija--tamna {
  --tinta: var(--tamna-sek-tinta); --tinta-2: var(--tamna-sek-tinta-2); --tinta-3: var(--tamna-sek-tinta-2);
  --rub: var(--tamna-sek-rub); --rub-jak: rgba(238,232,223,.25); --povrsina: var(--tamna-sek-povrsina);
  --bg-2: #2A2420; --krema: #D4A574; --more: #98111E;
  background: var(--tamna-sek); color: var(--tinta);
}
.sekcija--tamna .gumb--mali { background: var(--tinta); color: #17130F; }
:root[data-theme="dark"] .sekcija--tamna { border-top: 1px solid var(--rub); border-bottom: 1px solid var(--rub); }

/* ----- moj aparat (u trgovini) ----- */
.moj-aparat {
  margin: -8px 0 40px; padding: 22px; border-radius: calc(var(--r) + 4px);
  background: var(--povrsina); border: 1px solid var(--rub);
}
@media (min-width: 720px) { .moj-aparat { padding: 28px 32px; } }
.moj-aparat__oznaka { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--krema); margin-bottom: 14px; }
.aparati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 820px) { .aparati { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aparat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 14px 16px; border-radius: 12px; background: transparent; border: 1px solid var(--rub-jak);
  transition: border-color .2s ease, background-color .2s ease;
}
.aparat:hover { border-color: var(--tinta-2); }
.aparat.je-odabran { border-color: var(--krema); background: rgba(212,165,116,.08); box-shadow: inset 0 0 0 1px var(--krema); }
.aparat__naziv { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1.15; }
.aparat__opis { font-size: .75rem; color: var(--tinta-3); line-height: 1.35; }
.mjere { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.mjere__prazno { font-size: .9rem; color: var(--tinta-2); }
.mjere__prazno a { color: var(--krema); }
.mjere__lista { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.mjere__lista dt { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.mjere__lista dd { margin: 2px 0 0; font-family: var(--mono); font-size: .95rem; }
.mjere__kit {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 18px; border-radius: 999px;
  border: 1px solid var(--krema); background: transparent; font-size: .88rem; transition: background-color .2s ease;
}
.mjere__kit:hover { background: rgba(212,165,116,.12); }
.mjere__kit strong { font-family: var(--mono); font-weight: 500; }
.mjere__kit s { font-family: var(--mono); font-size: .78rem; color: var(--tinta-3); }
.mjere__kit em { font-style: normal; color: var(--krema); }
@keyframes pojava { from { opacity: 0; transform: translateY(8px); } }

/* ----- trgovina ----- */
.filteri { display: flex; gap: 6px; flex-wrap: wrap; }
.filteri button {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--rub-jak); background: transparent;
  font-size: .85rem; font-weight: 500; color: var(--tinta-2); transition: all .2s ease;
}
.filteri button:hover { color: var(--tinta); border-color: var(--tinta-2); }
.filteri button[aria-selected="true"] { background: var(--tinta); color: var(--tamna-sek); border-color: var(--tinta); }
.filteri { margin-bottom: 24px; }
.mreza__prazno { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--tinta-3); border: 1px dashed var(--rub-jak); border-radius: var(--r); }

.mreza { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 560px) { .mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.kartica {
  display: flex; flex-direction: column; border-radius: calc(var(--r) + 4px); overflow: hidden;
  background: var(--povrsina); border: 1px solid var(--rub);
  transition: transform .3s ease, border-color .3s ease, opacity .3s ease;
  animation: pojava .45s ease both;
}
.kartica:hover { transform: translateY(-4px); border-color: var(--rub-jak); }
.kartica.je-blijedo { opacity: .5; }
.kartica__slika {
  text-decoration: none; display: grid; place-items: center; aspect-ratio: 5 / 4; border: 0; padding: 24px;
  background: radial-gradient(120% 90% at 50% 100%, rgba(212,165,116,.16), transparent 60%), #2A2420;
}
.kartica__slika .art { height: 100%; width: auto; max-height: 230px; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.kartica:hover .kartica__slika .art { transform: translateY(-6px) scale(1.03); }
.kartica__tekst { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.kartica h3 { font-size: 1.55rem; margin-top: 10px; }
.kartica h3 a { text-decoration: none; }
.kartica h3 a:hover { color: var(--krema); }
.kartica__pod { color: var(--tinta-3); font-size: .88rem; margin-top: 4px; }
.kartica__dno { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; }
.kartica__cijena { font-family: var(--mono); font-size: 1.05rem; font-weight: 500; }
.kartica__cijena s, .m-cijena s { color: var(--tinta-3); font-size: .78em; margin-left: 4px; }

.znacka {
  align-self: flex-start; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rub-jak); color: var(--tinta-3);
}
.znacka--da { border-color: color-mix(in srgb, var(--uspjeh) 50%, transparent); color: #8FD1AA; background: rgba(127,195,156,.08); }
.znacka--ne { color: var(--tinta-3); }
.znacka--usteda { border-color: rgba(212,165,116,.5); color: #E3C29E; }

.art__krug { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.07); }
.art--ikona { color: #E6DED3; }
.art--ikona .a { stroke: #D4A574; }

/* ----- koraci ----- */
.koraci { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--rub); border: 1px solid var(--rub); border-radius: calc(var(--r) + 4px); overflow: hidden; }
@media (min-width: 820px) { .koraci { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.koraci li { background: var(--bg); padding: 32px 26px 36px; }
.koraci__br { font-family: var(--mono); font-size: .8rem; color: var(--krema); }
.koraci h3 { margin: 26px 0 10px; font-size: 1.7rem; }
.koraci p { color: var(--tinta-2); }

/* ----- priča ----- */
.prica { background: var(--more); color: #F3F0EA; position: relative; overflow: hidden; }
:root[data-theme="dark"] .prica { background: #0E1E2C; }
.prica::before {
  content: ''; position: absolute; inset: auto -10% -40% -10%; height: 70%;
  background: radial-gradient(60% 60% at 50% 100%, rgba(255,255,255,.08), transparent 70%);
}
.prica .nadnaslov { color: #E3C29E; }
.prica__in { position: relative; display: grid; gap: 56px; }
@media (min-width: 960px) { .prica__in { grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; } }
.prica__tekst h2 { margin-bottom: 26px; }
.prica__tekst p + p { margin-top: 16px; }
.prica__tekst p { color: rgba(243,240,234,.78); font-size: 1.05rem; max-width: 560px; }
.stupovi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.14); border-radius: var(--r); overflow: hidden; }
.stupovi li { padding: 24px 20px; background: var(--more); }
:root[data-theme="dark"] .stupovi li { background: #0E1E2C; }
.stupovi h3 { font-size: 1.5rem; margin-bottom: 8px; }
.stupovi p { font-size: .88rem; color: rgba(243,240,234,.72); line-height: 1.5; }
@media (max-width: 400px) { .stupovi { grid-template-columns: minmax(0, 1fr); } }

/* ----- vodiči ----- */
.vodici { display: grid; gap: 16px; }
@media (min-width: 820px) { .vodici { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vodic {
  position: relative; padding: 28px 24px; border-radius: calc(var(--r) + 4px);
  background: var(--povrsina); border: 1px solid var(--rub); display: flex; flex-direction: column; gap: 12px;
}
.oznaka { font-family: var(--mono); font-size: .75rem; color: var(--more); }
.vodic h3 { font-size: 1.45rem; line-height: 1.15; }
.vodic p { color: var(--tinta-3); font-size: .92rem; }
.vodic__uskoro { margin-top: auto; padding-top: 8px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--krema); font-weight: 600; }

/* ----- lista čekanja ----- */
.lista { background: var(--bg-2); }
.lista__in { display: grid; gap: 40px; }
@media (min-width: 900px) { .lista__in { grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; } }
.forma { display: grid; gap: 14px; padding: 28px 22px; background: var(--povrsina); border: 1px solid var(--rub); border-radius: calc(var(--r) + 4px); box-shadow: var(--sjena); }
@media (min-width: 720px) { .forma { padding: 34px; } }
.polje { display: grid; gap: 6px; }
.polje span { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--tinta-2); }
.polje input, .polje select {
  width: 100%; min-height: 50px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--rub-jak); background: var(--bg); color: var(--tinta);
  font: inherit; font-size: 16px; transition: border-color .2s ease;
  appearance: none; -webkit-appearance: none;
}
.polje select {
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-3) 50%), linear-gradient(135deg, var(--tinta-3) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 17px) 22px; background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: 40px;
}
.polje input:focus, .polje select:focus { outline: none; border-color: var(--more); }
.forma .gumb { margin-top: 6px; }
.forma__poruka { font-size: .9rem; min-height: 1.4em; }
.forma__poruka.je-uspjeh { color: var(--uspjeh); }
.forma__poruka.je-greska { color: var(--greska); }
.medenjak { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ----- FAQ ----- */
.faq { border-top: 1px solid var(--rub); }
.faq details { border-bottom: 1px solid var(--rub); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 1.5px solid var(--tinta-3); border-bottom: 1.5px solid var(--tinta-3); transform: rotate(45deg); transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 0 24px; color: var(--tinta-2); max-width: 680px; }

/* ----- podnožje ----- */
.podnozje { background: var(--tamna-sek); color: var(--tamna-sek-tinta); padding: 72px 0 28px; }
.podnozje .logo__znak { color: #98111E; }
.podnozje__in { display: grid; gap: 44px; }
@media (min-width: 820px) { .podnozje__in { grid-template-columns: 1fr 1.6fr; } }
.podnozje__slogan { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--tamna-sek-tinta-2); }
.podnozje__stupci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
@media (min-width: 560px) { .podnozje__stupci { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.podnozje h4 { margin: 0 0 14px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #D4A574; font-weight: 600; }
.podnozje__stupci a, .podnozje__stupci p { display: block; text-decoration: none; color: var(--tamna-sek-tinta-2); font-size: .92rem; padding: 4px 0; }
.podnozje__stupci a:hover { color: var(--tamna-sek-tinta); }
.podnozje__dno {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--tamna-sek-rub);
  font-size: .78rem; color: var(--tamna-sek-tinta-2);
}

/* ----- ladica (košarica) ----- */
.zastor { position: fixed; inset: 0; z-index: 60; background: rgba(10,8,7,.5); opacity: 0; transition: opacity .25s ease; }
.zastor.je-otvoren { opacity: 1; }
.ladica {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(440px, 100%);
  display: flex; flex-direction: column; background: var(--bg); color: var(--tinta);
  box-shadow: -20px 0 60px -20px rgba(0,0,0,.4);
  transform: translateX(105%); transition: transform .35s cubic-bezier(.2,.8,.2,1); visibility: hidden;
}
.ladica.je-otvoren { transform: none; visibility: visible; }
.ladica:focus { outline: none; }
.ladica__glava { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--rub); }
.ladica__glava h2 { font-size: 1.7rem; }
.ladica__tijelo { flex: 1; overflow-y: auto; padding: 18px 20px; overscroll-behavior: contain; }
.ladica__dno { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rub); display: grid; gap: 8px; }
.ladica__dno:empty { display: none; }
.ladica__red { display: flex; justify-content: space-between; font-size: .9rem; color: var(--tinta-2); }
.ladica__ukupno { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0 8px; }
.ladica__ukupno strong { font-family: var(--mono); font-size: 1.25rem; font-weight: 500; }

.prazna { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 64px 0; color: var(--tinta-3); }
.prazna svg { color: var(--rub-jak); }

.prag { padding: 14px 16px; border-radius: 12px; background: var(--bg-2); font-size: .88rem; }
.prag__traka { height: 4px; border-radius: 2px; background: var(--rub); margin-top: 10px; overflow: hidden; }
.prag__traka span { display: block; height: 100%; background: var(--krema); transition: width .4s ease; }

.stavke { list-style: none; margin: 16px 0 0; padding: 0; }
.stavka { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rub); align-items: start; }
.stavka__slika { width: 72px; height: 84px; border-radius: 10px; display: grid; place-items: center; background: #2A2420; padding: 8px; color: #D9D1C6; }
.stavka__slika .art { width: 100%; height: 100%; }
.stavka__naziv { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.stavka__opcija { font-size: .8rem; color: var(--tinta-3); margin-top: 2px; }
.stavka__red { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.stavka__cijena { font-family: var(--mono); font-size: .92rem; }
.stavka__makni { width: 32px; height: 32px; border: 0; background: none; color: var(--tinta-3); border-radius: 50%; display: grid; place-items: center; }
.stavka__makni:hover { background: var(--bg-2); color: var(--tinta); }
.stavka__makni svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.kolicina { display: inline-flex; align-items: center; border: 1px solid var(--rub-jak); border-radius: 999px; height: 48px; }
.kolicina button { width: 44px; height: 100%; border: 0; background: none; font-size: 1.15rem; color: var(--tinta-2); }
.kolicina button:hover { color: var(--tinta); }
.kolicina output { min-width: 22px; text-align: center; font-family: var(--mono); font-size: .95rem; }
.kolicina--mala { height: 34px; }
.kolicina--mala button { width: 32px; font-size: 1rem; }

.dostava, .m-opcije { border: 0; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.dostava legend, .m-opcije legend { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 10px; padding: 0; }
.dostava label {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--rub-jak); border-radius: 12px; cursor: pointer; font-size: .92rem;
}
.dostava label:has(input:checked) { border-color: var(--more); box-shadow: inset 0 0 0 1px var(--more); }
.dostava em { font-style: normal; font-family: var(--mono); font-size: .85rem; color: var(--tinta-2); }
.dostava input, .m-opcije input { accent-color: var(--more); width: 18px; height: 18px; margin: 0; }

.narudzba { display: grid; gap: 14px; }
.narudzba__info { padding: 16px; border-radius: 12px; background: var(--bg-2); font-size: .9rem; color: var(--tinta-2); line-height: 1.55; }
.narudzba__info strong { color: var(--tinta); display: block; margin-bottom: 4px; }

/* ----- modal proizvoda ----- */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: end center; background: rgba(10,8,7,.55); opacity: 0; transition: opacity .22s ease; }
.modal[hidden] { display: none; }
.modal.je-otvoren { opacity: 1; }
@media (min-width: 820px) { .modal { place-items: center; padding: 32px; } }
.modal__okvir {
  position: relative; width: 100%; max-width: 980px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); color: var(--tinta); border-radius: 22px 22px 0 0;
  transform: translateY(24px); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.modal.je-otvoren .modal__okvir { transform: none; }
.modal__okvir:focus { outline: none; }
@media (min-width: 820px) { .modal__okvir { border-radius: 22px; } }
.modal__zatvori { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--bg); border-color: var(--rub); }
.modal__sadrzaj { display: grid; }
@media (min-width: 820px) { .modal__sadrzaj { grid-template-columns: 1fr 1.05fr; } }
.m-slika {
  display: grid; place-items: center; padding: 44px 24px; min-height: 280px;
  background: radial-gradient(120% 90% at 50% 100%, rgba(212,165,116,.18), transparent 60%), #2A2420; color: #D9D1C6;
}
.m-slika .art { max-height: 320px; width: auto; height: 100%; }
@media (min-width: 820px) { .m-slika { min-height: 100%; } }
.m-tekst { padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); }
@media (min-width: 820px) { .m-tekst { padding: 48px 44px; } }
.m-tekst h2 { font-size: clamp(2rem, 5vw, 2.8rem); padding-right: 40px; }
.m-cijena { font-family: var(--mono); font-size: 1.2rem; margin-top: 10px; }
.m-opis { margin-top: 18px; color: var(--tinta-2); }
.upozorenje { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--greska) 12%, transparent); color: var(--greska); font-size: .88rem; }
.m-podaci { margin: 22px 0 0; display: grid; gap: 0; border-top: 1px solid var(--rub); }
.m-podaci div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rub); font-size: .9rem; }
.m-podaci dt { color: var(--tinta-3); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding-top: 3px; }
.m-podaci dd { margin: 0; }
.m-sadrzaj { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.m-sadrzaj li { position: relative; padding-left: 22px; font-size: .92rem; }
.m-sadrzaj li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 10px; height: 1px; background: var(--krema); }
.m-opcije { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.m-opcije legend { grid-column: 1 / -1; }
.m-opcije label {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--rub-jak); border-radius: 12px; cursor: pointer; font-size: .88rem;
}
.m-opcije label:has(input:checked) { border-color: var(--more); box-shadow: inset 0 0 0 1px var(--more); }
.m-red { display: flex; gap: 10px; margin-top: 22px; }
.m-red .gumb { flex: 1; }

/* ----- tost ----- */
.tost {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 80;
  display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
  padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--tinta); color: var(--bg);
  font-size: .88rem; box-shadow: var(--sjena);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.tost.je-vidljiv { transform: translate(-50%, 0); opacity: 1; }
.tost span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tost button { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--krema); color: #17130F; font-weight: 600; font-size: .82rem; }
.mjere__kit span { white-space: nowrap; }
.mjere__kit strong, .mjere__kit s { white-space: nowrap; }
@media (max-width: 719px) {
  .mjere__kit { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .mjere__kit span { flex: 1; text-align: left; }
}

/* ----- povjerenje ----- */
.povjerenje { border-top: 1px solid var(--rub); border-bottom: 1px solid var(--rub); background: var(--bg); }
.povjerenje__lista { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
@media (min-width: 900px) { .povjerenje__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.povjerenje li { display: flex; gap: 12px; align-items: flex-start; padding: 22px 8px; }
@media (min-width: 900px) { .povjerenje li { padding: 26px 16px; } .povjerenje li + li { border-left: 1px solid var(--rub); } }
.povjerenje svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--krema); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.povjerenje span { font-size: .78rem; color: var(--tinta-3); line-height: 1.4; }
.povjerenje strong { display: block; font-size: .88rem; color: var(--tinta); font-weight: 600; margin-bottom: 2px; }

/* ----- slagač ----- */
.setup__in { display: grid; gap: 24px; align-items: start; }
@media (min-width: 980px) { .setup__in { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } }
.setup__upozorenje { margin-bottom: 20px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); font-size: .9rem; color: var(--tinta-2); }
.setup__upozorenje a { color: var(--krema); }
.setup__faze { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.faza__glava { display: flex; gap: 16px; align-items: baseline; margin-bottom: 12px; }
.faza__br { font-family: var(--mono); font-size: .8rem; color: var(--krema); }
.faza__glava h3 { font-size: 1.6rem; }
.faza__glava p { font-size: .88rem; color: var(--tinta-3); margin-top: 2px; }
.faza__stavke { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 640px) and (max-width: 979px), (min-width: 1180px) { .faza__stavke { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stavka-setup {
  display: grid; grid-template-columns: auto 52px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 14px 10px 12px; border-radius: 14px; border: 1px solid var(--rub); background: var(--povrsina); cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.stavka-setup:hover { border-color: var(--rub-jak); }
.stavka-setup.je-odabrana { border-color: var(--krema); box-shadow: inset 0 0 0 1px var(--krema); }
.stavka-setup.je-nedostupna { opacity: .5; cursor: not-allowed; }
.stavka-setup input { accent-color: var(--krema); width: 18px; height: 18px; margin: 0; }
.stavka-setup__slika { width: 52px; height: 52px; border-radius: 10px; background: #2A2420; display: grid; place-items: center; padding: 4px; }
.stavka-setup__slika .art { width: 100%; height: 100%; }
.stavka-setup__tekst { min-width: 0; }
.stavka-setup__tekst strong { display: block; font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; }
.stavka-setup__tekst small { display: block; font-size: .76rem; color: var(--tinta-3); }
.stavka-setup__cijena { font-family: var(--mono); font-size: .85rem; white-space: nowrap; }
.setup__zbroj {
  position: sticky; top: 92px; padding: 24px; border-radius: calc(var(--r) + 4px);
  background: var(--tamna-sek); color: var(--tamna-sek-tinta); display: grid; gap: 12px;
}
:root[data-theme="dark"] .setup__zbroj { background: var(--povrsina); border: 1px solid var(--rub); }
.setup__zbroj .gumb--glavni { background: #EEE8DF; color: #17130F; }
.setup__zbroj .gumb--glavni:hover { background: #D4A574; }
.setup__zbroj .gumb--glavni:disabled { opacity: .4; cursor: not-allowed; }
.setup__zbroj-red { display: flex; justify-content: space-between; align-items: baseline; }
.setup__zbroj-red span { font-size: .85rem; color: var(--tamna-sek-tinta-2); }
.setup__zbroj-red strong { font-family: var(--mono); font-size: 1.6rem; font-weight: 500; }
.setup__dostava { font-size: .82rem; color: var(--tamna-sek-tinta-2); }
.setup__kit { background: none; border: 0; padding: 4px 0 0; text-align: left; font-size: .85rem; color: #D4A574; line-height: 1.45; }
.setup__kit:hover { text-decoration: underline; }
@media (max-width: 979px) {
  .setup__zbroj { position: sticky; bottom: 12px; top: auto; z-index: 5; box-shadow: var(--sjena); padding: 16px 18px; gap: 8px; }
  .setup__dostava, .setup__kit { display: none; }
}

/* ----- preporuke u košarici ----- */
.uz-to { margin-top: 20px; padding: 14px; border-radius: 14px; background: var(--bg-2); display: grid; gap: 10px; }
.uz-to__naslov { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.uz-to__stavka { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.uz-to__slika { width: 44px; height: 44px; border-radius: 9px; background: #2A2420; padding: 4px; display: grid; place-items: center; }
.uz-to__slika .art { width: 100%; height: 100%; }
.uz-to__tekst strong { display: block; font-size: .9rem; font-weight: 600; }
.uz-to__tekst small { font-size: .76rem; color: var(--tinta-3); }
.uz-to__dodaj { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rub-jak); background: var(--bg); font-size: 1.1rem; line-height: 1; }
.uz-to__dodaj:hover { background: var(--tinta); color: var(--bg); }
.ladica__sigurno { text-align: center; font-size: .76rem; color: var(--tinta-3); }

/* ----- slični u modalu ----- */
.m-slicni { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rub); }
.m-slicni .nadnaslov { margin-bottom: 12px; }
.m-slicni__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.m-slicni__stavka { text-decoration: none; display: grid; gap: 6px; font-size: .8rem; line-height: 1.3; }
.m-slicni__stavka small { font-family: var(--mono); color: var(--tinta-3); }
.m-slicni__slika { aspect-ratio: 1; border-radius: 12px; background: #2A2420; display: grid; place-items: center; padding: 8px; transition: transform .2s ease; }
.m-slicni__slika .art { width: 100%; height: 100%; }
.m-slicni__stavka:hover .m-slicni__slika { transform: translateY(-2px); }

/* =====================================================================
   Više stranica: zaglavlje s aparatom, trgovina, proizvod, košarica, blagajna
   ===================================================================== */
.ui { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav a[aria-current="page"] { color: var(--tinta); }
.nav a[aria-current="page"]::after { right: 0; }
.nav { gap: 28px; }

/* gumb aparata u zaglavlju */
.aparat-gumb {
  display: none; align-items: baseline; gap: 6px; margin-right: 6px; padding: 8px 14px; border-radius: 999px;
  border: 1px dashed var(--rub-jak); background: transparent; font-size: .8rem; max-width: 220px;
}
.aparat-gumb:hover { border-color: var(--tinta-2); }
.aparat-gumb.je-postavljen { border-style: solid; border-color: var(--krema); }
.aparat-gumb__oznaka { color: var(--tinta-3); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.aparat-gumb__naziv { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .aparat-gumb { display: inline-flex; } }
.aparat-izbor {
  position: absolute; top: calc(100% - 6px); right: max(16px, calc((100vw - var(--wrap)) / 2 + 32px));
  width: min(340px, calc(100vw - 32px)); z-index: 50; padding: 18px; border-radius: 18px;
  background: var(--povrsina); border: 1px solid var(--rub); box-shadow: var(--sjena); animation: pojava .2s ease;
}
.aparat-izbor[hidden] { display: none; }
.aparat-izbor__naslov { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
.aparat-izbor__opis { font-size: .82rem; color: var(--tinta-3); margin: 2px 0 14px; }
.aparat-izbor__lista, .mob-nav__aparati, .filtri__aparati { display: grid; gap: 6px; }
.aparat-izbor__poveznica { display: block; margin-top: 14px; font-size: .85rem; color: var(--krema); text-decoration: none; }
.aparat--mali { flex-direction: row; align-items: center; justify-content: space-between; padding: 11px 14px; min-height: 0; }
.aparat--mali .aparat__naziv { font-family: var(--sans); font-size: .9rem; font-weight: 600; }
.aparat__mm { font-family: var(--mono); font-size: .75rem; color: var(--tinta-3); }
.aparat.je-odabran .aparat__mm { color: var(--krema); }
.mob-nav__aparat { padding: 18px 4px 6px; }
.mob-nav__aparat p { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--krema); margin-bottom: 10px; font-weight: 600; }
.mob-nav a[aria-current="page"] { color: var(--krema); }

/* glava podstranice i mrvice */
.glava-str { padding: 48px 0 36px; }
@media (min-width: 720px) { .glava-str { padding: 64px 0 44px; } }
.glava-str h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: .98; }
.mrvice { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: .8rem; color: var(--tinta-3); margin-bottom: 22px; }
.mrvice a { color: var(--tinta-2); text-decoration: none; }
.mrvice a:hover { color: var(--krema); }
.mrvice span:last-child { color: var(--tinta); }
.sekcija--bez-vrha { padding-top: 0; }
.sekcija--uska { padding: 64px 0; border-top: 1px solid var(--rub); }
.poveznica { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--tinta-2); }
.poveznica:hover { color: var(--krema); }
.gumb--svijetli { background: #F3F0EA; color: #17130F; margin-top: 26px; }
.gumb--svijetli:hover { background: #D4A574; }
.tekst { font-size: 1.08rem; color: var(--tinta-2); }
.tekst p + p { margin-top: 18px; }
.tekst h2 { margin: 48px 0 18px; color: var(--tinta); font-size: clamp(1.8rem, 4vw, 2.4rem); }
.tekst__uvod { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.35; color: var(--tinta); }

/* početna: aparati i kategorije */
.aparat-kartice { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .aparat-kartice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .aparat-kartice { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aparat-kartica {
  display: flex; flex-direction: column; gap: 6px; padding: 26px 24px; min-height: 230px; text-decoration: none;
  border-radius: calc(var(--r) + 4px); background: var(--povrsina); border: 1px solid var(--rub);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.aparat-kartica:hover { transform: translateY(-4px); border-color: var(--krema); box-shadow: var(--sjena); }
.aparat-kartica__mm { font-family: var(--mono); font-size: 2rem; line-height: 1; color: var(--krema); margin-bottom: auto; }
.aparat-kartica__naziv { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.1; margin-top: 28px; }
.aparat-kartica__opis { font-size: .82rem; color: var(--tinta-3); }
.aparat-kartica__kit { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .85rem; font-weight: 600; }
.aparat-kartica--drugi { background: transparent; border-style: dashed; }
.aparat-kartica--drugi .aparat-kartica__mm { color: var(--tinta-3); }

.kategorije { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .kategorije { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kategorije { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kategorija {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px 14px 14px;
  border-radius: calc(var(--r) + 4px); background: var(--povrsina); border: 1px solid var(--rub); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.kategorija:hover { border-color: var(--rub-jak); transform: translateY(-2px); }
.kategorija__slika { width: 76px; height: 76px; border-radius: 14px; background: #2A2420; display: grid; place-items: center; padding: 6px; }
.kategorija__slika .art { width: 100%; height: 100%; }
.kategorija__tekst strong { display: block; font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; }
.kategorija__tekst small { display: block; font-size: .8rem; color: var(--tinta-3); line-height: 1.4; margin-top: 4px; }
.kategorija__broj { font-family: var(--mono); font-size: .8rem; color: var(--tinta-3); }

.setup-traka { background: var(--bg-2); }
.setup-traka__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .setup-traka__in { grid-template-columns: 1fr 1.1fr; gap: 72px; } }
.setup-traka .gumb { margin-top: 26px; }
.setup-traka__koraci { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rub); border: 1px solid var(--rub); border-radius: calc(var(--r) + 4px); overflow: hidden; }
@media (min-width: 560px) { .setup-traka__koraci { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.setup-traka__koraci li { background: var(--povrsina); padding: 22px 20px; display: grid; gap: 4px; }
.setup-traka__koraci span { font-family: var(--mono); font-size: .78rem; color: var(--krema); }
.setup-traka__koraci strong { font-family: var(--serif); font-size: 1.45rem; }
.setup-traka__koraci small { font-size: .84rem; color: var(--tinta-3); }

/* trgovina */
.trgovina { padding-bottom: 96px; }
.trgovina__in { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .trgovina__in { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; } }
.filtri { display: grid; gap: 28px; }
@media (min-width: 900px) { .filtri { position: sticky; top: 92px; } }
@media (max-width: 899px) {
  .filtri { display: none; padding: 20px; border-radius: 18px; background: var(--povrsina); border: 1px solid var(--rub); }
  .filtri.je-otvoreno { display: grid; }
}
.filtri__naslov { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--krema); margin-bottom: 12px; }
.filtri .mjere { margin-top: 14px; display: grid; gap: 12px; }
.filtri .mjere__lista { gap: 10px 20px; }
.filtri .mjere__kit { width: 100%; justify-content: space-between; }
.filtri__kat { display: grid; gap: 2px; }
.filtri__kat button {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px;
  border: 0; background: transparent; font-size: .92rem; color: var(--tinta-2); text-align: left;
}
.filtri__kat button:hover { background: var(--bg-2); color: var(--tinta); }
.filtri__kat button[aria-pressed="true"] { background: var(--tinta); color: var(--bg); }
.filtri__kat small { font-family: var(--mono); font-size: .75rem; opacity: .7; }
.trgovina__traka { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.trgovina__broj { flex: 1 1 200px; font-size: .9rem; color: var(--tinta-3); }
.trgovina__broj strong { color: var(--tinta); font-weight: 600; }
.gumb--mali-obrub { min-height: 40px; padding: 0 18px; font-size: .85rem; }
.filtri-gumb { display: inline-flex; }
@media (min-width: 900px) { .filtri-gumb { display: none; } }
.sort { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--tinta-3); }
.sort select {
  min-height: 40px; padding: 0 34px 0 14px; border-radius: 999px; border: 1px solid var(--rub-jak); background: var(--bg); color: var(--tinta);
  font: inherit; font-size: .85rem; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-3) 50%), linear-gradient(135deg, var(--tinta-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; background-size: 5px 5px; background-repeat: no-repeat;
}
@media (min-width: 1000px) { .mreza--trgovina { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 999px) { .mreza--trgovina { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* kartice u svijetloj trgovini */
.trgovina .kartica, .sekcija:not(.sekcija--tamna) .kartica { background: var(--povrsina); }

/* proizvod */
.proizvod-str { padding: 32px 0 72px; }
.proizvod { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .proizvod { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.proizvod__slika {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 24px; padding: 40px;
  background: radial-gradient(120% 90% at 50% 100%, rgba(212,165,116,.2), transparent 60%), #2A2420; color: #E6DED3;
}
@media (min-width: 900px) { .proizvod__slika { position: sticky; top: 92px; } }
.proizvod__slika .art { width: 78%; height: auto; max-height: 100%; }
.proizvod__slika--kit .art { width: 92%; }
.proizvod__info h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; }
.proizvod__cijena { font-family: var(--mono); font-size: 1.5rem; margin-top: 14px; }
.proizvod__cijena s { color: var(--tinta-3); font-size: .7em; margin-left: 6px; }
.kompat { margin-top: 14px; font-size: .9rem; min-height: 1.5em; }
.kompat a { color: var(--krema); }
.kompat--da { color: var(--uspjeh); font-weight: 600; }
.kompat--ne { color: var(--greska); font-weight: 600; }
.kompat__gumb { background: none; border: 0; padding: 0; color: var(--krema); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.proizvod__opis { margin-top: 16px; color: var(--tinta-2); font-size: 1.05rem; }
.proizvod__kit { margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: var(--bg-2); }
.proizvod__kit .m-sadrzaj { margin-top: 10px; }
.proizvod__mali-naslov { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); }
.kupnja { margin-top: 6px; }
.proizvod__obecanja { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.proizvod__obecanja li { display: flex; gap: 10px; align-items: center; font-size: .88rem; color: var(--tinta-2); }
.proizvod__obecanja .ui { color: var(--krema); }
.m-podaci a { color: inherit; }
.kupi-traka {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 14px; justify-content: space-between;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--povrsina); border-top: 1px solid var(--rub);
  box-shadow: 0 -10px 30px -16px rgba(0,0,0,.35); transform: translateY(110%); transition: transform .3s ease;
}
.kupi-traka.je-vidljiva { transform: none; }
.kupi-traka__tekst { min-width: 0; display: grid; }
.kupi-traka__tekst strong { font-family: var(--serif); font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kupi-traka__tekst span { font-family: var(--mono); font-size: .85rem; color: var(--tinta-3); }
.kupi-traka .gumb { min-height: 44px; flex: none; }
@media (min-width: 900px) { .kupi-traka { display: none; } }

/* stranica aparata */
.glava-aparat { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .glava-aparat { grid-template-columns: 1.2fr 1fr; gap: 56px; } }
.mjere__lista--velika { margin: 26px 0; gap: 14px 36px; }
.mjere__lista--velika dd { font-size: 1.2rem; }
.glava-aparat .gumb.je-aktivan { border-color: var(--krema); color: var(--krema); }
.glava-aparat__kit {
  display: grid; gap: 14px; justify-items: center; padding: 28px; border-radius: 24px; text-decoration: none; text-align: center;
  background: radial-gradient(120% 90% at 50% 100%, rgba(212,165,116,.2), transparent 60%), #2A2420; color: #EEE8DF;
  transition: transform .3s ease;
}
.glava-aparat__kit:hover { transform: translateY(-4px); }
.glava-aparat__slika .art { width: min(300px, 100%); height: auto; }
.glava-aparat__tekst { display: grid; gap: 4px; }
.glava-aparat__tekst small { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #D4A574; }
.glava-aparat__tekst strong { font-family: var(--serif); font-size: 1.5rem; }
.glava-aparat__tekst span { font-family: var(--mono); }
.glava-aparat__tekst s { color: #A79F95; font-size: .85em; margin-left: 6px; }

/* setup (podstranica) */
.setup__aparat { margin-bottom: 32px; }
.setup__aparat .filtri__aparati { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 820px) { .setup__aparat .filtri__aparati { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* stranica košarice */
.kosarica-str { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .kosarica-str { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; } }
.kosarica-str > .prazna { grid-column: 1 / -1; }
.stavke--velike .stavka { grid-template-columns: 96px minmax(0, 1fr) auto; }
.stavke--velike .stavka__slika { width: 96px; height: 96px; }
.stavka__naziv { display: block; text-decoration: none; }
a.stavka__naziv:hover { color: var(--krema); }
.sazetak { padding: 24px; border-radius: 20px; background: var(--povrsina); border: 1px solid var(--rub); display: grid; gap: 10px; }
@media (min-width: 900px) { .sazetak { position: sticky; top: 92px; } }
.sazetak h2 { font-size: 1.7rem; margin-bottom: 4px; }
.sazetak .dostava { margin: 0 0 8px; }
.ladica__sigurno { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ladica__sigurno svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.uz-to__tekst a { display: block; font-size: .9rem; font-weight: 600; text-decoration: none; }

/* blagajna */
.blagajna { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .blagajna { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; } }
.blagajna > .prazna, .blagajna__preusmjeri { grid-column: 1 / -1; text-align: center; padding: 48px 0; }
.blagajna__forma { display: grid; gap: 22px; }
.blagajna__info { padding: 16px 18px; border-radius: 14px; background: var(--bg-2); font-size: .9rem; color: var(--tinta-2); line-height: 1.55; }
.blagajna__info strong { display: block; color: var(--tinta); margin-bottom: 2px; }
.blagajna__korak { border: 1px solid var(--rub); border-radius: 18px; padding: 20px; margin: 0; background: var(--povrsina); display: grid; gap: 16px; }
.blagajna__korak legend { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; padding: 0 6px; }
.blagajna__korak legend span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: var(--bg); font-family: var(--mono); font-size: .75rem; }
.blagajna__korak .dostava { margin: 0; }
.polja { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .polja { grid-template-columns: repeat(2, minmax(0, 1fr)); } .polje--puno { grid-column: 1 / -1; } }
.polje em { font-style: normal; font-weight: 400; color: var(--tinta-3); }
.polje textarea {
  width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--rub-jak); background: var(--bg); color: var(--tinta);
  font: inherit; font-size: 16px; resize: vertical;
}
.polje textarea:focus { outline: none; border-color: var(--more); }
.polje.je-greska input, .polje.je-greska select { border-color: var(--greska); }
.privola { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--tinta-2); cursor: pointer; }
.privola input { accent-color: var(--krema); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.sazetak__stavke { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; }
.sazetak__stavke li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: .88rem; }
.sazetak__slika { position: relative; width: 52px; height: 52px; border-radius: 10px; background: #2A2420; display: grid; place-items: center; padding: 4px; color: #E6DED3; }
.sazetak__slika .art { width: 100%; height: 100%; }
.sazetak__slika b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--krema); color: #17130F; font-size: .7rem; display: grid; place-items: center; padding: 0 5px; }
.sazetak__naziv { display: grid; font-weight: 600; }
.sazetak__naziv small { font-weight: 400; color: var(--tinta-3); font-size: .78rem; }
.sazetak__stavke li > span:last-child { font-family: var(--mono); font-size: .85rem; }

/* hvala, 404, pitanja */
.hvala { padding: 96px 0 120px; }
.hvala__in { text-align: center; display: grid; justify-items: center; gap: 4px; }
.hvala__in h1 { font-size: clamp(3rem, 9vw, 5.5rem); }
.hvala__in .uvod { margin: 18px auto 0; }
.hvala__in .hero__cta { justify-content: center; }
.hvala__znak { width: 64px; height: 64px; color: var(--krema); margin-bottom: 18px; }
.dostava-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--rub); border: 1px solid var(--rub); border-radius: 16px; overflow: hidden; margin-bottom: 40px; }
.dostava-info div { background: var(--povrsina); padding: 18px 20px; display: grid; gap: 4px; }
.dostava-info strong { font-size: .9rem; }
.dostava-info span { font-family: var(--mono); color: var(--krema); }
.faq details:target summary { color: var(--krema); }
.stupovi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stupovi--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kartica h3 a { color: inherit; }

/* ----- mega izbornik ----- */
.nav { align-items: center; }
.nav__mega { position: static; }
.nav__mega > a { position: relative; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 45; padding: 0 0 28px;
  background: var(--bg); border-bottom: 1px solid var(--rub); box-shadow: 0 30px 40px -30px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.nav__mega:hover .mega, .nav__mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition-delay: .08s, .08s, 0s; }
.mega__in { max-width: var(--wrap); margin: 0 auto; padding: 28px 32px 0; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.mega__naslov { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--krema); margin-bottom: 12px; }
.mega__stupac:first-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; align-content: start; }
.mega__stupac:first-child .mega__naslov { grid-column: 1 / -1; }
.mega a::after { display: none; }
.mega__kat { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; color: var(--tinta); }
.mega__kat:hover { background: var(--bg-2); }
.mega__ikona { width: 44px; height: 44px; flex: none; border-radius: 10px; background: #2A2420; display: grid; place-items: center; padding: 3px; }
.mega__ikona .art { width: 100%; height: 100%; }
.mega__kat strong { display: block; font-size: .92rem; }
.mega__kat small { display: block; font-size: .75rem; color: var(--tinta-3); line-height: 1.35; }
.mega__aparat { display: flex; justify-content: space-between; padding: 11px 10px; border-bottom: 1px solid var(--rub); text-decoration: none; color: var(--tinta); font-size: .92rem; }
.mega__aparat small { font-family: var(--mono); color: var(--tinta-3); }
.mega__aparat:hover { color: var(--krema); }
.mega__sve { display: inline-block; margin-top: 14px; font-size: .88rem; font-weight: 600; color: var(--krema); text-decoration: none; }
.mega__setup {
  display: grid; align-content: end; gap: 4px; padding: 22px; border-radius: 18px; text-decoration: none; position: relative; overflow: hidden; min-height: 220px;
  background: radial-gradient(120% 90% at 50% 100%, rgba(212,165,116,.22), transparent 60%), #241F1C; color: #EEE8DF;
}
.mega__setup-art { position: absolute; right: -24px; top: -20px; width: 180px; opacity: .5; color: #EEE8DF; }
.mega__setup-art svg .a { stroke: #D4A574; }
.mega__setup small { font-size: .78rem; color: #A79F95; position: relative; }
.mega__setup strong { font-family: var(--serif); font-size: 1.6rem; position: relative; }
.mega__setup span:last-child { font-size: .82rem; color: #D4A574; position: relative; }

/* ----- pretraga ----- */
.pretraga { position: absolute; left: 0; right: 0; top: 100%; z-index: 48; background: var(--bg); border-bottom: 1px solid var(--rub); box-shadow: 0 30px 40px -30px rgba(0,0,0,.4); padding: 18px 0 22px; animation: pojava .2s ease; }
.pretraga[hidden] { display: none; }
.pretraga__in { display: grid; gap: 12px; }
.pretraga__polje { display: flex; align-items: center; gap: 12px; padding: 0 8px 0 16px; border: 1px solid var(--rub-jak); border-radius: 14px; background: var(--povrsina); }
.pretraga__polje:focus-within { border-color: var(--krema); }
.pretraga__polje svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--tinta-3); stroke-width: 1.8; stroke-linecap: round; }
.pretraga__polje input { flex: 1; min-width: 0; min-height: 54px; border: 0; background: transparent; color: var(--tinta); font: inherit; font-size: 17px; outline: none; }
.pretraga__polje input::-webkit-search-cancel-button { display: none; }
.pretraga__zatvori { flex: none; border: 1px solid var(--rub-jak); background: transparent; border-radius: 8px; padding: 4px 8px; font-size: .72rem; color: var(--tinta-3); font-family: var(--mono); }
.pretraga__rezultati { display: grid; gap: 2px; max-height: min(60vh, 520px); overflow-y: auto; }
.pretraga__naslov { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); padding: 6px 4px; }
.pretraga__red { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; }
.pretraga__red:hover, .pretraga__red.je-odabran { background: var(--bg-2); }
.pretraga__slika { width: 48px; height: 48px; border-radius: 10px; background: #2A2420; display: grid; place-items: center; padding: 3px; }
.pretraga__slika .art { width: 100%; height: 100%; }
.pretraga__tekst strong { display: block; font-weight: 600; font-size: .95rem; }
.pretraga__tekst small { display: block; font-size: .78rem; color: var(--tinta-3); }
.pretraga__cijena { font-family: var(--mono); font-size: .88rem; }
.pretraga__sve { display: block; padding: 12px 8px; font-weight: 600; font-size: .9rem; color: var(--krema); text-decoration: none; border-radius: 12px; }
.pretraga__sve.je-odabran, .pretraga__sve:hover { background: var(--bg-2); }
.pretraga__prazno { padding: 18px 8px; color: var(--tinta-3); }
.trgovina__upit { flex-basis: 100%; order: -1; font-size: .95rem; }
.trgovina__upit button { margin-left: 6px; border: 1px solid var(--rub-jak); background: transparent; border-radius: 50%; width: 26px; height: 26px; font-size: .75rem; }

/* ----- zaglavlje na uskim ekranima ----- */
@media (max-width: 479px) { .tema-gumb { display: none; } .logo__rijec { font-size: 1.3rem; letter-spacing: .22em; } }
.mob-nav__kat { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 4px 4px; }
.mob-nav__kat a { font-family: var(--sans); font-size: .85rem; padding: 8px 14px; border: 1px solid var(--rub-jak); border-radius: 999px; }
.mob-nav__tema { margin: 14px 4px 0; align-self: flex-start; border: 1px solid var(--rub-jak); background: transparent; border-radius: 999px; padding: 10px 16px; font-size: .85rem; }

/* ----- proizvod: korištenje, nedavno ----- */
.proizvod__napomena { font-size: .78rem; color: var(--tinta-3); margin-top: 4px; }
.koraci-kor { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rub); border: 1px solid var(--rub); border-radius: 18px; overflow: hidden; }
@media (min-width: 820px) { .koraci-kor { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.koraci-kor li { background: var(--povrsina); padding: 24px 22px 26px; display: grid; gap: 10px; align-content: start; }
.koraci-kor span { font-family: var(--mono); font-size: .8rem; color: var(--krema); }
.koraci-kor p { color: var(--tinta-2); }
.nedavno { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 180px); gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.nedavno__stavka { scroll-snap-align: start; display: grid; gap: 6px; text-decoration: none; font-size: .85rem; }
.nedavno__slika { aspect-ratio: 1; border-radius: 14px; background: #2A2420; display: grid; place-items: center; padding: 10px; transition: transform .2s ease; }
.nedavno__slika .art { width: 100%; height: 100%; }
.nedavno__stavka:hover .nedavno__slika { transform: translateY(-3px); }
.nedavno__stavka small { font-family: var(--mono); color: var(--tinta-3); }

/* ----- pravno ----- */
.pravno h2 { font-size: 1.6rem; margin: 40px 0 12px; }
.pravno ul { padding-left: 20px; display: grid; gap: 8px; margin: 14px 0 0; }
.pravno a { color: var(--krema); }
.trgovac { margin: 0; display: grid; border-top: 1px solid var(--rub); }
.trgovac div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rub); font-size: .95rem; }
.trgovac dt { color: var(--tinta-3); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; padding-top: 3px; }
.trgovac dd { margin: 0; color: var(--tinta); }
.napomena { padding: 16px 18px; border-radius: 14px; background: var(--bg-2); font-size: .95rem; }
.obrazac { margin-top: 14px; padding: 22px; border: 1px dashed var(--rub-jak); border-radius: 14px; font-family: var(--mono); font-size: .85rem; line-height: 1.9; }
.obrazac p + p { margin-top: 12px; }
.pravno__datum { margin-top: 48px; font-size: .82rem; color: var(--tinta-3); }
.podnozje__pravno { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.podnozje__pravno a { color: inherit; text-decoration: none; }
.podnozje__pravno a:hover { color: var(--tamna-sek-tinta); }
.privola a { color: var(--krema); }
@media (min-width: 900px) {
  .zaglavlje__in .nav { align-self: stretch; }
  .nav__mega { display: flex; align-items: center; }
  .nav > a { align-self: center; }
}

/* =====================================================================
   Mobitel: lebdeća donja traka, izbornik kao ploča odozdo
   ===================================================================== */
.traka { display: none; }
@media (max-width: 899px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .zaglavlje__in { justify-content: center; height: 60px; }
  .zaglavlje__akcije { display: none; }
  .najava { font-size: .74rem; padding: 7px 12px; }

  .traka {
    position: fixed; z-index: 55; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch;
    height: 64px; padding: 0 4px; border-radius: 22px;
    background: color-mix(in srgb, var(--povrsina) 84%, transparent);
    backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px);
    border: 1px solid var(--rub); box-shadow: 0 18px 40px -18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.06);
    transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  }
  :root[data-theme="dark"] .traka { background: color-mix(in srgb, #1B1715 82%, transparent); box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); }
  body.traka-skrivena .traka { transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none; }
  .traka__stavka {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 0; background: none; padding: 0; text-decoration: none; color: var(--tinta-3);
    font-size: .62rem; font-weight: 600; letter-spacing: .02em; -webkit-tap-highlight-color: transparent;
  }
  .traka__stavka svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
  .traka__stavka:active svg { transform: scale(.9); }
  .traka__stavka[aria-current="page"], .traka__stavka[aria-expanded="true"] { color: var(--tinta); }
  .traka__stavka[aria-current="page"]::after {
    content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--krema);
  }
  .traka__stavka[aria-current="page"] span { opacity: 0; }
  .traka__brojac {
    position: absolute; top: 8px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--krema); color: #17130F; font-size: .62rem; line-height: 17px; text-align: center; font-weight: 700;
  }
  .traka__brojac[hidden] { display: none; }

  /* izbornik kao ploča odozdo */
  .mob-nav {
    position: fixed; z-index: 63; left: 0; right: 0; bottom: 0; top: auto; max-height: 86vh; max-height: 86dvh; overflow-y: auto;
    display: flex; flex-direction: column; padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
    background: var(--bg); border-radius: 24px 24px 0 0; border: 0; box-shadow: 0 -20px 50px -20px rgba(0,0,0,.5);
    transform: translateY(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); overscroll-behavior: contain;
  }
  .mob-nav[hidden] { display: none; }
  .mob-nav.je-otvoren { transform: none; }
  .mob-nav__glava { position: sticky; top: -8px; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; background: var(--bg); }
  .mob-nav__rucka { position: absolute; left: 50%; top: 4px; width: 40px; height: 4px; border-radius: 2px; background: var(--rub-jak); transform: translateX(-50%); }
  .mob-nav__glava p { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--krema); }
  .mob-nav__zatvori { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rub); background: var(--povrsina); font-size: .8rem; }
  .mob-nav > a { padding: 12px 2px; font-size: 1.45rem; }

  /* ostalo što stoji na dnu ide iznad trake */
  .tost { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .kupi-traka {
    left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); border-radius: 18px; border: 1px solid var(--rub);
    padding: 10px 10px 10px 16px; transition: transform .35s ease, bottom .35s ease;
    transform: translateY(calc(100% + 120px));
  }
  body.traka-skrivena .kupi-traka { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .setup__zbroj { bottom: calc(88px + env(safe-area-inset-bottom)); transition: bottom .35s ease; }
  body.traka-skrivena .setup__zbroj { bottom: 12px; }
}
@media (max-width: 899px) {
  /* backdrop-filter bi fiksnu ploču izbornika vezao uz zaglavlje */
  .zaglavlje { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
}

/* ----- favoriti ----- */
.kartica { position: relative; }
.srce {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); background: rgba(23,19,15,.45); color: #EEE8DF;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .2s ease, background-color .2s ease;
}
.srce:hover { transform: scale(1.06); background: rgba(23,19,15,.65); }
.srce svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill .2s ease; }
.srce[aria-pressed="true"] { color: #E3A27A; }
.srce[aria-pressed="true"] svg { fill: currentColor; animation: srce .35s ease; }
@keyframes srce { 40% { transform: scale(1.3); } }
.proizvod__naslov { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; }
.srce--veliko { position: static; flex: none; width: 48px; height: 48px; margin-top: 4px; background: var(--povrsina); border-color: var(--rub-jak); color: var(--tinta-2); backdrop-filter: none; }
.srce--veliko:hover { background: var(--bg-2); }
.srce--veliko[aria-pressed="true"] { color: #C9744A; }
.fav-gumb { position: relative; color: inherit; }
.brojac--fav { background: #E3A27A; }
.prazna__srce { fill: none; stroke: currentColor; stroke-width: 1.4; }
#favoriti-mreza > .prazna { grid-column: 1 / -1; }

/* ----- raščlamba kita ----- */
.kit-dijelovi { list-style: none; margin: 12px 0 14px; padding: 0; display: grid; }
.kit-dijelovi li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--rub-jak); font-size: .92rem; }
.kit-dijelovi a { text-decoration: none; }
.kit-dijelovi a:hover { color: var(--krema); }
.kit-dijelovi span { font-family: var(--mono); font-size: .85rem; color: var(--tinta-3); white-space: nowrap; }
.kit-zbroj { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: .9rem; color: var(--tinta-3); }
.kit-zbroj s, .kit-zbroj strong { font-family: var(--mono); }
.kit-zbroj--kit { color: var(--tinta); font-weight: 600; }
.kit-zbroj--kit strong { font-size: 1.15rem; font-weight: 500; }
.kit-usteda { margin-top: 8px; display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(127,195,156,.14); color: var(--uspjeh); font-size: .82rem; font-weight: 700; }

.art--kutija .a { stroke: #D4A574; }

/* ----- birač modela aparata ----- */
.modeli { display: grid; gap: 10px; }
.modeli__trazi { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--rub-jak); border-radius: 12px; background: var(--bg); }
.modeli__trazi:focus-within { border-color: var(--krema); }
.modeli__trazi svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--tinta-3); stroke-width: 1.8; stroke-linecap: round; }
.modeli__trazi input { flex: 1; min-width: 0; min-height: 42px; border: 0; background: transparent; color: var(--tinta); font: inherit; font-size: 16px; outline: none; }
.modeli__popis { display: grid; gap: 12px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.mob-nav .modeli__popis { max-height: none; }
.modeli__grupa[hidden] { display: none; }
.modeli__grupa p { font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 6px 2px; }
.modeli__grupa { display: grid; gap: 4px; }
.model {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--rub); background: transparent; font-size: .88rem; font-weight: 500;
  transition: border-color .2s ease, background-color .2s ease;
}
.model[hidden] { display: none; }
.model:hover { border-color: var(--rub-jak); background: var(--bg-2); }
.model[aria-pressed="true"] { border-color: var(--krema); background: rgba(212,165,116,.1); box-shadow: inset 0 0 0 1px var(--krema); }
.model small { font-family: var(--mono); font-size: .72rem; color: var(--tinta-3); flex: none; }
.model[aria-pressed="true"] small { color: var(--krema); }
.modeli--chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.modeli--chips .model { width: auto; border-radius: 999px; padding: 9px 16px; }
.aparat-izbor__makni { margin-top: 10px; background: none; border: 0; padding: 0; font-size: .8rem; color: var(--tinta-3); text-decoration: underline; text-underline-offset: 3px; }
.mjere__model { font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.filtri .mjere { gap: 8px; }
.setup__aparat .modeli__popis { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); max-height: 300px; }
.glava-aparat .filtri__naslov { margin-top: 6px; }

/* ----- tablica mjera po modelu ----- */
.tablica-omot { overflow-x: auto; border: 1px solid var(--rub); border-radius: 18px; background: var(--povrsina); }
.tablica-mjera { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tablica-mjera th, .tablica-mjera td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--rub); vertical-align: top; }
.tablica-mjera thead th { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; background: var(--bg-2); }
.tablica-mjera tbody th { font-weight: 600; white-space: nowrap; }
.tablica-mjera tbody th small { display: block; font-weight: 400; font-family: var(--mono); font-size: .72rem; color: var(--tinta-3); }
.tablica-mjera td { font-family: var(--mono); font-size: .82rem; }
.tablica-mjera__napomena td { font-family: var(--sans); font-size: .82rem; color: var(--tinta-3); padding-top: 0; }
.tablica-mjera tr:last-child > * { border-bottom: 0; }
.tablica-izvori { margin-top: 12px; font-size: .78rem; color: var(--tinta-3); }
.tablica-izvori a { color: inherit; }
@media (max-width: 719px) {
  .tablica-omot { border: 0; background: none; overflow: visible; }
  .tablica-mjera thead { display: none; }
  .tablica-mjera, .tablica-mjera tbody { display: block; }
  .tablica-mjera tbody tr:not(.tablica-mjera__napomena) { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 12px; border: 1px solid var(--rub); border-radius: 14px 14px 0 0; background: var(--povrsina); overflow: hidden; }
  .tablica-mjera tbody th { grid-column: 1 / -1; white-space: normal; }
  .tablica-mjera td::before { content: attr(data-o); display: block; font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 2px; }
  .tablica-mjera__napomena { display: block; border: 1px solid var(--rub); border-top: 0; border-radius: 0 0 14px 14px; background: var(--povrsina); }
  .tablica-mjera__napomena td { display: block; padding: 12px 16px; }
  .tablica-mjera tbody tr:not(.tablica-mjera__napomena):has(+ tr:not(.tablica-mjera__napomena)), .tablica-mjera tbody tr:not(.tablica-mjera__napomena):last-child { border-radius: 14px; }
}

/* ----- All Black ----- */
.art--crna { color: #8C8C8C; }
.art--crna .a { stroke: #C4C4C4; }
.art--crna [fill="#D4A574"] { fill: #0B0B0B; fill-opacity: .96; }
.art--crna [fill="currentColor"] { fill: #0E0E0E; fill-opacity: .92; }
.art--crna ellipse[stroke="none"] { fill: #000; fill-opacity: .35; }
.art--kutija.art--crna [fill="currentColor"] { fill-opacity: .9; }
.pastila { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 8px; border: 1px solid var(--rub-jak); }
.pastila--klasicna { background: linear-gradient(135deg, #E8E4DD 0 50%, #B98A5E 50% 100%); }
.pastila--crna { background: linear-gradient(135deg, #2B2B2B, #050505); border-color: #555; }
.zavrsna-prekidac { display: flex; gap: 6px; flex-wrap: wrap; }
.zavrsna-prekidac button { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rub-jak); background: transparent; font-size: .85rem; font-weight: 500; }
.zavrsna-prekidac button[aria-pressed="true"] { border-color: var(--krema); box-shadow: inset 0 0 0 1px var(--krema); }
.zavrsna-prekidac--svijetli button { color: #EEE8DF; border-color: rgba(238,232,223,.25); }
.znacka--crna { margin-left: 6px; border-color: #555; color: #D7D7D7; background: #111; }
.kartica__tekst > .znacka + .znacka--crna { margin-top: 0; }
.kartica__tekst { align-items: flex-start; }
.m-opcije--zavrsna span { display: inline-flex; align-items: center; }
.proizvod__slika.je-crna { background: radial-gradient(120% 90% at 50% 100%, rgba(200,200,200,.12), transparent 60%), #161616; }
.all-black { background: #0B0B0B; color: #EEE8DF; --tinta: #EEE8DF; --tinta-2: #A9A9A9; --tinta-3: #8A8A8A; --rub: rgba(255,255,255,.1); --rub-jak: rgba(255,255,255,.22); }
.all-black .nadnaslov { color: #BDBDBD; }
.all-black__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .all-black__in { grid-template-columns: 1fr 1.2fr; gap: 64px; } }
.all-black__tekst .uvod { color: #A9A9A9; }
.all-black__tekst .zavrsna-prekidac { margin-top: 24px; }
.all-black__tekst .gumb { margin-top: 18px; }
.all-black__slike { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.all-black__slika { display: grid; justify-items: center; gap: 8px; padding: 18px 12px 14px; border-radius: 18px; text-decoration: none; background: radial-gradient(120% 90% at 50% 100%, rgba(200,200,200,.09), transparent 60%), #151515; border: 1px solid rgba(255,255,255,.07); transition: transform .25s ease; }
.all-black__slika:hover { transform: translateY(-3px); }
.all-black__slika .art { width: 100%; max-width: 170px; height: auto; }
.all-black__slika span { font-size: .82rem; color: #BDBDBD; }

/* ===================== Vodiči ===================== */
.skriveno { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.clanci { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .clanci { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .clanci { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.clanak-kartica { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: 20px; background: var(--povrsina); border: 1px solid var(--rub); text-decoration: none; transition: transform .25s ease, border-color .25s ease; }
.clanak-kartica:hover { transform: translateY(-3px); border-color: var(--krema); }
.clanak-kartica h3 { font-size: 1.8rem; }
.clanak-kartica p { color: var(--tinta-3); font-size: .95rem; }
.clanak-kartica__dalje { margin-top: auto; padding-top: 10px; display: inline-flex; gap: 8px; align-items: center; font-size: .85rem; font-weight: 600; color: var(--krema); }
.laboratorij-traka { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 22px 24px; border-radius: 20px; text-decoration: none; background: var(--tamna-sek); color: var(--tamna-sek-tinta); }
:root[data-theme="dark"] .laboratorij-traka { background: var(--povrsina); border: 1px solid var(--rub); }
.laboratorij-traka small { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #D4A574; margin-bottom: 4px; }
.laboratorij-traka strong { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }
.laboratorij-traka .ui { color: #D4A574; }
.clanak__glava { padding-top: 48px; padding-bottom: 12px; }
.clanak__glava h1 { font-size: clamp(3rem, 8vw, 5rem); line-height: .95; }
.clanak__podnaslov { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--tinta-2); margin-top: 12px; }
.clanak__uvod { margin-top: 28px; font-size: 1.15rem; line-height: 1.65; color: var(--tinta); padding-left: 18px; border-left: 2px solid var(--krema); }
.clanak__tijelo { padding-bottom: 72px; }
.clanak__tijelo h2 { margin: 44px 0 14px; }
.clanak__tijelo ul, .clanak__tijelo ol { padding-left: 22px; display: grid; gap: 8px; margin: 14px 0 0; }
.clanak__tijelo a { color: var(--krema); }
.savjet { margin: 28px 0; padding: 18px 20px; border-radius: 16px; background: var(--bg-2); font-size: 1rem; color: var(--tinta-2); }
.savjet strong { display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--krema); margin-bottom: 6px; }
.rjecnik { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--rub); }
.rjecnik dt { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--tinta); padding-top: 18px; }
.rjecnik dd { margin: 4px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--rub); }

/* ===================== Laboratorij ===================== */
.lab-alati { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .lab-alati { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lab-alat { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px 18px 16px; border-radius: 20px; background: var(--povrsina); border: 1px solid var(--rub); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.lab-alat:hover { border-color: var(--krema); transform: translateY(-2px); }
.lab-alat__slika { width: 76px; height: 76px; border-radius: 16px; background: #2A2420; display: grid; place-items: center; padding: 6px; }
.lab-alat__slika .art { width: 100%; height: 100%; }
.lab-alat strong { display: block; font-family: var(--serif); font-size: 1.55rem; }
.lab-alat small { display: block; color: var(--tinta-3); font-size: .86rem; margin-top: 2px; }
.lab-alat .ui { color: var(--krema); }

.lab { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .lab { grid-template-columns: 1fr 1.2fr; align-items: start; } .lab-rezultat, .lab-povijest, .lab__panel--siroki { grid-column: 1 / -1; } .lab--dnevnik { grid-template-columns: 1fr 2fr; } .lab--dnevnik .lab__panel--siroki { grid-column: 2; } .lab--dnevnik .dnevnik-podsjetnik { grid-column: 1 / -1; } }
.lab__panel { padding: 24px; border-radius: 22px; background: var(--povrsina); border: 1px solid var(--rub); display: grid; gap: 16px; align-content: start; }
.lab__panel[hidden] { display: none; }
.lab-oznaka, .lab-polje > label { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--krema); }
.lab-polje { display: grid; gap: 10px; }
.lab-broj { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 52px; align-items: center; border: 1px solid var(--rub-jak); border-radius: 16px; overflow: hidden; background: var(--bg); }
.lab-broj button { height: 60px; border: 0; background: transparent; font-size: 1.4rem; color: var(--tinta-2); }
.lab-broj button:hover { background: var(--bg-2); }
.lab-broj input { min-width: 0; height: 60px; border: 0; background: transparent; color: var(--tinta); text-align: right; font-family: var(--mono); font-size: 1.8rem; padding: 0 6px; -moz-appearance: textfield; }
.lab-broj input::-webkit-outer-spin-button, .lab-broj input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lab-broj input:focus { outline: none; }
.lab-broj span { font-family: var(--mono); color: var(--tinta-3); padding-right: 10px; }
.lab-omjeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .lab-omjeri { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#dnevnik-voda.lab-omjeri { grid-template-columns: minmax(0, 1fr); }
.lab-omjeri button { display: grid; gap: 2px; padding: 12px; border-radius: 14px; border: 1px solid var(--rub-jak); background: transparent; text-align: left; }
.lab-omjeri button strong { font-family: var(--mono); font-size: 1.05rem; font-weight: 500; }
.lab-omjeri button small { font-size: .74rem; color: var(--tinta-3); }
.lab-omjeri button[aria-checked="true"] { border-color: var(--krema); background: rgba(212,165,116,.1); box-shadow: inset 0 0 0 1px var(--krema); }
.lab-cilj { display: grid; gap: 2px; padding: 18px 20px; border-radius: 16px; background: var(--tamna-sek); color: var(--tamna-sek-tinta); }
.lab-cilj span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #D4A574; }
.lab-cilj strong { font-family: var(--mono); font-size: 2.6rem; font-weight: 500; line-height: 1.1; }
.lab-cilj small { color: #A79F95; font-size: .85rem; }
.lab-stoperica { justify-items: center; text-align: center; }
.lab-vrijeme { font-family: var(--mono); font-size: clamp(4.5rem, 18vw, 8rem); line-height: 1; font-weight: 500; letter-spacing: -.03em; transition: color .3s ease; font-variant-numeric: tabular-nums; }
.lab-vrijeme small { font-size: .3em; color: var(--tinta-3); margin-left: 6px; }
body.lab-u-zoni .lab-vrijeme { color: var(--uspjeh); }
.lab-zona { width: 100%; max-width: 460px; }
.lab-zona__traka { position: relative; display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--bg-2) 0 44.4%, rgba(127,195,156,.55) 44.4% 66.6%, var(--bg-2) 66.6% 100%); }
.lab-zona__traka i { position: absolute; top: -5px; width: 3px; height: 18px; border-radius: 2px; background: var(--tinta); transform: translateX(-50%); transition: left .1s linear; left: 0; }
.lab-zona__oznake { position: relative; display: block; height: 18px; margin-top: 6px; font-family: var(--mono); font-size: .68rem; color: var(--tinta-3); }
.lab-zona__oznake b { position: absolute; font-weight: 400; transform: translateX(-50%); }
.lab-zona__oznake b:nth-child(1) { left: 0; transform: none; } .lab-zona__oznake b:nth-child(2) { left: 44.4%; } .lab-zona__oznake b:nth-child(3) { left: 55.5%; } .lab-zona__oznake b:nth-child(4) { left: 66.6%; } .lab-zona__oznake b:nth-child(5) { left: 77.7%; } .lab-zona__oznake b:nth-child(6) { right: 0; left: auto; transform: none; }
.lab-status { color: var(--tinta-2); min-height: 1.5em; }
.lab-gumbi { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.lab-start { width: 160px; height: 160px; border-radius: 50%; border: 0; background: var(--tinta); color: var(--bg); font-family: var(--serif); font-size: 2rem; font-weight: 600; box-shadow: var(--sjena); transition: transform .15s ease, background-color .2s ease; }
.lab-start:active { transform: scale(.96); }
.lab-start.je-aktivan { background: #C9744A; color: #fff; }
.lab-okusi { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-okusi button { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--rub-jak); background: transparent; font-size: .9rem; }
.lab-okusi button[aria-pressed="true"] { border-color: var(--krema); background: rgba(212,165,116,.1); }
.lab-dijagnoza { display: grid; gap: 8px; }
.lab-savjet { padding: 12px 16px; border-radius: 12px; background: var(--bg-2); font-size: .95rem; border-left: 3px solid var(--rub-jak); }
.lab-savjet--ok { border-left-color: var(--uspjeh); }
.lab-savjet--brzo, .lab-savjet--sporo { border-left-color: #C9744A; }
.lab-savjet--okus { border-left-color: var(--krema); }
.lab-poveznica { color: var(--krema); font-weight: 600; font-size: .9rem; }
.lab-rezultat .gumb { justify-self: start; }
.lab-shotovi { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lab-shotovi li { display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rub); font-size: .88rem; }
.lab-shot__omjer { font-family: var(--mono); }
.lab-shot__okus { color: var(--tinta-3); }
.lab-shotovi small { color: var(--tinta-3); font-family: var(--mono); font-size: .75rem; }
.lab-prazno { color: var(--tinta-3); grid-template-columns: 1fr !important; }
@media (max-width: 560px) { .lab-shotovi li { grid-template-columns: 1fr 1fr; } }

/* skala mljevenja */
.skala { padding: 24px; border-radius: 22px; background: var(--povrsina); border: 1px solid var(--rub); }
.skala__traka { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding-bottom: 36px; }
.skala__traka::before { content: ''; position: absolute; left: 4%; right: 4%; bottom: 14px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #6B4A33, #A9764A 40%, #D9BFA0); }
.skala__metoda { position: relative; display: grid; justify-items: center; gap: 8px; padding: 10px 4px; border: 0; background: transparent; font-size: .78rem; font-weight: 600; color: var(--tinta-3); border-radius: 12px; }
.skala__metoda::after { content: ''; position: absolute; bottom: -29px; width: 16px; height: 16px; border-radius: 50%; background: var(--povrsina); border: 2px solid var(--tinta-3); }
.skala__metoda[aria-selected="true"] { color: var(--tinta); background: var(--bg-2); }
.skala__metoda[aria-selected="true"]::after { background: var(--krema); border-color: var(--krema); transform: scale(1.2); }
@media (max-width: 719px) { .skala__traka { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 8px; padding-bottom: 12px; } .skala__traka::before, .skala__metoda::after { display: none; } .skala__metoda { border: 1px solid var(--rub); } }
.skala__os { display: flex; justify-content: space-between; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin: 6px 4% 0; }
.skala__detalj { display: grid; gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rub); }
@media (min-width: 860px) { .skala__detalj { grid-template-columns: 1fr 1.1fr; align-items: center; } }
.skala__vizual { padding: 20px; border-radius: 16px; background: #1C1714; }
.skala__vizual svg { width: 100%; height: auto; }
.skala__cestice circle { fill: #A9764A; opacity: .9; }
.skala__raspon { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 14px; }
.skala__raspon span { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: #D4A574; }
.skala__mjerilo { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: .68rem; color: #A79F95; }
.skala__mjerilo b { font-weight: 400; }
.skala__tekst h2 { font-size: 2.4rem; }
.skala__tekst dl { margin: 14px 0; display: grid; gap: 0; border-top: 1px solid var(--rub); }
.skala__tekst dl div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rub); }
.skala__tekst dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); padding-top: 3px; }
.skala__tekst dd { margin: 0; font-family: var(--mono); font-size: .92rem; }
.skala__tekst p { color: var(--tinta-2); }
.skala__savjet { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); font-size: .9rem; }
.skala__savjet a { color: var(--krema); }
.mlinci { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; }
.mlinac { padding: 18px; border-radius: 16px; background: var(--povrsina); border: 1px solid var(--rub); }
.mlinac h3 { font-size: 1.35rem; color: var(--tinta); }
.mlinac p { font-size: .88rem; margin-top: 6px; }
@media (max-width: 480px) { .mlinci { grid-template-columns: minmax(0, 1fr); } }

/* dnevnik */
.dnevnik-aparat { font-size: 1.05rem; }
.dnevnik-aparat a { color: var(--krema); }
.dnevnik-napomena { font-size: .82rem; color: var(--tinta-3); }
.dnevnik-zadaci { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zadatak { display: grid; gap: 12px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--rub); background: var(--bg); border-left: 4px solid var(--rub-jak); }
@media (min-width: 720px) { .zadatak { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.zadatak--ok { border-left-color: var(--uspjeh); }
.zadatak--uskoro { border-left-color: var(--krema); }
.zadatak--kasni { border-left-color: #C9744A; }
.zadatak__tekst strong { display: block; font-size: 1rem; }
.zadatak__tekst small { display: block; color: var(--tinta-3); font-size: .82rem; margin-top: 2px; }
.zadatak__tekst a { display: inline-block; margin-top: 6px; color: var(--krema); font-size: .82rem; font-weight: 600; text-decoration: none; }
.zadatak__status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zadatak__oznaka { font-family: var(--mono); font-size: .8rem; padding: 6px 10px; border-radius: 999px; background: var(--bg-2); }
.zadatak--kasni .zadatak__oznaka { background: rgba(201,116,74,.15); color: #C9744A; }
.zadatak--uskoro .zadatak__oznaka { background: rgba(212,165,116,.15); }
.zadatak--ok .zadatak__oznaka { background: rgba(127,195,156,.15); color: var(--uspjeh); }
.zadatak__datum input { min-height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--rub-jak); background: var(--povrsina); color: var(--tinta); font: inherit; font-size: 15px; }
.dnevnik-podsjetnik { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.dnevnik-podsjetnik p:not(.lab-oznaka) { color: var(--tinta-2); max-width: 640px; }

/* ===================== Ruby Red (#98111E) u obje teme; natpis na vrhu u tamnoj temi bijel ===================== */
:root[data-theme="dark"] { --more: #98111E; --more-svj: #B8202F; }
:root[data-theme="dark"] .najava { background: #98111E; color: #fff; }
:root[data-theme="dark"] .najava a { color: #fff; }
:root[data-theme="dark"] .gumb--glavni:hover { color: #fff; }
:root[data-theme="dark"] .prica, :root[data-theme="dark"] .stupovi li { background: #98111E; }

/* All Black kitovi: metal po razini */
.art--crna .a { stroke: var(--metal, #C4C4C4); }

/* ===================== Moja Velbura i briga ===================== */
.moja { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .moja { grid-template-columns: 1fr 1.3fr; align-items: start; } .moja .lab__panel--siroki { grid-column: 1 / -1; } }
.moja__glava { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.moja__glava a { font-size: .85rem; font-weight: 600; color: var(--krema); text-decoration: none; }
.moja__pomoc { font-size: .82rem; color: var(--tinta-3); }
.moja__tip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 560px) { .moja__tip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.moja__tip button strong { font-family: var(--sans); font-size: .85rem; font-weight: 600; }
.moja__zadaci { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.moja__zadaci .zadatak { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 12px 14px; }
.moja__zadaci strong { font-size: .92rem; }
.moja__prosjek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.moja__prosjek div { padding: 12px; border-radius: 12px; background: var(--bg-2); display: grid; gap: 2px; }
.moja__prosjek small { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.moja__prosjek strong { font-family: var(--mono); font-size: 1.2rem; font-weight: 500; }
.moja__oprema { display: flex; flex-wrap: wrap; gap: 8px; }
.oprema-cip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--rub-jak); background: transparent; font-size: .85rem; }
.oprema-cip__slika { width: 34px; height: 34px; border-radius: 50%; background: #2A2420; display: grid; place-items: center; padding: 2px; }
.oprema-cip__slika .art { width: 100%; height: 100%; }
.oprema-cip[aria-pressed="true"] { border-color: var(--uspjeh); background: rgba(127,195,156,.1); }
.oprema-cip[aria-pressed="true"]::after { content: '✓'; color: var(--uspjeh); font-weight: 700; }
.moja__kopija { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.moja__kopija p:not(.lab-oznaka) { color: var(--tinta-2); max-width: 560px; }
.moja__uvoz { cursor: pointer; }
.prijedlozi { display: grid; gap: 10px; }
.prijedlog { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--rub); }
.prijedlog--tekst { grid-template-columns: minmax(0, 1fr); }
.prijedlog__slika { width: 72px; height: 72px; border-radius: 12px; background: #2A2420; display: grid; place-items: center; padding: 4px; }
.prijedlog__slika .art { width: 100%; height: 100%; }
.prijedlog__tekst strong { display: block; font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.prijedlog__tekst p { font-size: .88rem; color: var(--tinta-2); margin-top: 4px; }
.prijedlog__tekst .gumb { margin-top: 10px; }
.prijedlog__red { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; font-size: .85rem; }
.prijedlog__red a { font-weight: 600; text-decoration: none; }
.prijedlog__red b { font-family: var(--mono); font-weight: 500; }
.prijedlog__red .gumb { margin: 0 0 0 auto; }

.briga-traka { background: var(--bg-2); }
.briga-traka__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .briga-traka__in { grid-template-columns: 1fr 1.15fr; gap: 64px; } }
.briga-traka .hero__cta { margin-top: 26px; }
.briga-traka__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rub); border: 1px solid var(--rub); border-radius: 20px; overflow: hidden; }
@media (min-width: 560px) { .briga-traka__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.briga-traka__lista li { background: var(--povrsina); padding: 22px 20px; display: grid; gap: 4px; }
.briga-traka__lista span { font-family: var(--mono); font-size: .78rem; color: var(--krema); }
.briga-traka__lista strong { font-family: var(--serif); font-size: 1.45rem; }
.briga-traka__lista small { font-size: .85rem; color: var(--tinta-3); }
.briga { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.briga li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 26px 24px; border-radius: 22px; background: var(--povrsina); border: 1px solid var(--rub); }
.briga__br { font-family: var(--mono); font-size: 1.6rem; color: var(--krema); }
.briga h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
.briga p { color: var(--tinta-2); margin-top: 8px; max-width: 680px; }
.briga a { display: inline-block; margin-top: 12px; color: var(--krema); font-weight: 600; text-decoration: none; }
.briga--uskoro { border-style: dashed !important; background: transparent !important; }

/* ----- slagač u tri koraka ----- */
.korak { padding: 24px; border-radius: 22px; background: var(--povrsina); border: 1px solid var(--rub); margin-bottom: 16px; display: grid; gap: 16px; }
.korak[hidden] { display: none; }
.korak__glava { display: flex; gap: 16px; align-items: flex-start; }
.korak__glava h3 { font-size: 1.7rem; }
.korak__glava p { color: var(--tinta-3); font-size: .92rem; margin-top: 2px; }
.korak__br { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: var(--bg); font-family: var(--mono); font-size: .9rem; }
.korak__glava--3 { margin-bottom: 18px; }
.korak__odabrano { font-size: 1rem; }
.velicine { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .velicine { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.velicina { display: grid; gap: 4px; text-align: left; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--rub-jak); background: transparent; transition: border-color .2s ease, transform .2s ease; }
.velicina:hover { border-color: var(--tinta-2); transform: translateY(-2px); }
.velicina strong { font-family: var(--mono); font-size: 1.8rem; font-weight: 500; color: var(--krema); }
.velicina small { font-size: .82rem; color: var(--tinta-3); }
.velicina[aria-pressed="true"] { border-color: var(--krema); background: rgba(212,165,116,.1); box-shadow: inset 0 0 0 1px var(--krema); }
.korak__model summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--tinta-2); }
.korak__model[open] summary { margin-bottom: 12px; }
.stavka-setup.je-imam { opacity: .55; }
.stavka-setup.je-imam .stavka-setup__cijena { color: var(--uspjeh); font-family: var(--sans); font-weight: 600; }
.setup__napomena { margin-top: 18px; font-size: .9rem; color: var(--tinta-3); }
#setup-tijelo[hidden], .setup__zbroj[hidden] { display: none; }
.korak__pod { padding-top: 16px; border-top: 1px solid var(--rub); display: grid; gap: 6px; }
.korak__pomoc { font-size: .85rem; color: var(--tinta-3); margin-bottom: 6px; }
.velicine--male .velicina strong { font-family: var(--serif); font-size: 1.5rem; color: var(--tinta); }

/* ===================== Kitovi, recept, prvi dan, pitanje ===================== */
.kitovi__prekidac { margin-bottom: 20px; }
.kitovi { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .kitovi { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.kit-stupac { display: grid; gap: 10px; padding: 22px; border-radius: 24px; background: var(--povrsina); border: 1px solid var(--rub); }
.kit-stupac--barista { border-color: var(--krema); box-shadow: var(--sjena); }
.kit-stupac__slika { display: grid; place-items: center; padding: 18px; border-radius: 18px; background: radial-gradient(120% 90% at 50% 100%, rgba(212,165,116,.18), transparent 60%), #2A2420; }
.kit-stupac__slika .art { width: 100%; max-width: 250px; height: auto; }
.kit-stupac .nadnaslov { margin: 8px 0 0; }
.kit-stupac h2 { font-size: 1.9rem; }
.kit-stupac__cijena { font-family: var(--mono); font-size: 1.5rem; }
.kit-stupac__cijena s { font-size: .65em; color: var(--tinta-3); margin-left: 6px; }
.kit-stupac__za { font-family: var(--mono); font-size: .78rem; color: var(--tinta-3); }
.kit-stupac__lista { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rub); }
.kit-stupac__lista li { padding: 9px 0; border-bottom: 1px solid var(--rub); font-size: .9rem; }
.kit-stupac__lista .nema { color: var(--tinta-3); opacity: .55; }
.kit-stupac__lista .ima { font-weight: 500; }
.kitovi__napomena { margin-top: 24px; font-size: .9rem; color: var(--tinta-3); max-width: 760px; }
.kitovi__napomena a { color: var(--krema); }

.recept-karta { background: var(--tamna-sek); color: var(--tamna-sek-tinta); border-color: transparent; }
:root[data-theme="dark"] .recept-karta { background: var(--povrsina); border-color: var(--rub); }
.recept-karta .lab-oznaka { color: #D4A574; }
.recept-brojke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .recept-brojke { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.recept-brojke div { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.06); display: grid; gap: 4px; }
.recept-brojke small { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #A79F95; }
.recept-brojke strong { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; white-space: nowrap; }
.recept-ostalo { margin: 0; display: grid; border-top: 1px solid rgba(255,255,255,.12); }
.recept-ostalo div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .92rem; }
.recept-ostalo dt { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #A79F95; padding-top: 3px; }
.recept-ostalo dd { margin: 0; }
.recept-karta .lab-savjet { background: rgba(255,255,255,.06); color: inherit; }
.recept-karta .gumb--glavni { background: #EEE8DF; color: #17130F; justify-self: start; }
.recept-karta .dnevnik-napomena { color: #A79F95; }
#rec-velicina, #rec-przenje, #rec-pice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#rec-velicina button strong, #rec-przenje button strong, #rec-pice button strong { font-family: var(--sans); font-size: .88rem; font-weight: 600; }

.prvi-dan__napredak { position: sticky; top: 68px; z-index: 5; padding: 14px 0; background: var(--bg); display: grid; gap: 8px; font-size: .88rem; color: var(--tinta-2); }
@media (max-width: 899px) { .prvi-dan__napredak { top: 60px; } }
.prvi-dan { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.pd-korak { padding: 16px 18px; border-radius: 18px; background: var(--povrsina); border: 1px solid var(--rub); display: grid; gap: 8px; transition: opacity .2s ease, border-color .2s ease; }
.pd-korak label { display: grid; grid-template-columns: auto 34px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; }
.pd-korak input { width: 22px; height: 22px; margin: 5px 0 0; accent-color: var(--uspjeh); }
.pd-korak__br { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); font-family: var(--mono); font-size: .82rem; }
.pd-korak strong { display: block; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.pd-korak small { display: block; color: var(--tinta-3); font-size: .88rem; margin-top: 3px; }
.pd-korak > a { margin-left: 80px; color: var(--krema); font-size: .85rem; font-weight: 600; text-decoration: none; }
.pd-korak.je-gotov { border-color: var(--uspjeh); opacity: .7; }
.pd-korak.je-gotov strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.pd-korak.je-gotov .pd-korak__br { background: var(--uspjeh); color: #fff; }

.pitaj__in { display: grid; gap: 40px; }
@media (min-width: 900px) { .pitaj__in { grid-template-columns: 1fr 1fr; align-items: start; gap: 72px; } }
.pitaj__kontekst { font-family: var(--mono); font-size: .76rem; color: var(--tinta-3); line-height: 1.5; min-height: 1.2em; }

/* ----- izvori ----- */
.izvori { margin: 44px 0 0; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--rub); background: var(--povrsina); font-size: .88rem; }
.izvori__naslov { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--krema); margin-bottom: 10px; }
.izvori ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--tinta-3); }
.izvori a { color: var(--tinta-2); text-underline-offset: 3px; }
.izvori a:hover { color: var(--krema); }
.izvori span { color: var(--tinta-3); }

/* ===================== Birač modela: sklopive marke ===================== */
.modeli__popis { gap: 6px; }
details.modeli__grupa { display: block; border: 1px solid var(--rub); border-radius: 12px; overflow: hidden; }
details.modeli__grupa[hidden] { display: none; }
details.modeli__grupa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; font-size: .9rem; font-weight: 600; }
details.modeli__grupa summary::-webkit-details-marker { display: none; }
details.modeli__grupa summary small { font-family: var(--mono); font-weight: 400; font-size: .72rem; color: var(--tinta-3); }
details.modeli__grupa summary::after { content: ''; width: 8px; height: 8px; margin-left: 4px; border-right: 1.5px solid var(--tinta-3); border-bottom: 1.5px solid var(--tinta-3); transform: rotate(45deg); transition: transform .2s ease; flex: none; }
details.modeli__grupa summary span { flex: 1; }
details.modeli__grupa[open] summary::after { transform: rotate(-135deg); }
details.modeli__grupa[open] { border-color: var(--rub-jak); }
details.modeli__grupa[data-odabrana] { border-color: var(--krema); }
details.modeli__grupa .model { border: 0; border-top: 1px solid var(--rub); border-radius: 0; padding: 11px 14px; }
details.modeli__grupa .model[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--krema); }
.setup__aparat .modeli__popis { grid-template-columns: minmax(0, 1fr); }

/* ===================== Mobitel: skrolanje u izbornicima, tema ===================== */
.zaglavlje__tema-mob { display: none; }
.mob-nav__akcije { display: flex; align-items: center; gap: 8px; }
.mob-nav__tema-gumb { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rub-jak); background: var(--povrsina); font-size: .82rem; font-weight: 600; }
.mob-nav__tema-gumb svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tema-naziv--svijetla { display: none; }
:root[data-theme="dark"] .tema-naziv--tamna { display: none; }
:root[data-theme="dark"] .tema-naziv--svijetla { display: inline; }
/* u gumbu teme ikona pokazuje što dobiješ klikom */
.mob-nav__tema-gumb .i-sunce { display: none !important; }
.mob-nav__tema-gumb .i-mjesec { display: block !important; }
:root[data-theme="dark"] .mob-nav__tema-gumb .i-sunce { display: block !important; }
:root[data-theme="dark"] .mob-nav__tema-gumb .i-mjesec { display: none !important; }
@media (max-width: 899px) {
  .zaglavlje__in { position: relative; }
  .zaglavlje__tema-mob { display: inline-grid; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
  /* ugniježđeni popisi ne smiju imati vlastito skrolanje: skrola se samo ploča ili stranica */
  .modeli__popis { max-height: none !important; overflow: visible !important; overscroll-behavior: auto !important; }
  .pretraga__rezultati { max-height: none; overflow: visible; }
  .mob-nav { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
  .mob-nav > * { flex: none; }
  .pretraga { max-height: calc(100dvh - 60px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .ladica__tijelo { -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  .ladica__dno { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   Dizajn: prijelazi, tipografija, zrno, detalji
   ===================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-van .22s ease both; }
::view-transition-new(root) { animation: vt-u .32s ease both; }
@keyframes vt-van { to { opacity: 0; } }
@keyframes vt-u { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
::selection { background: #98111E; color: #fff; }
h2 { letter-spacing: -.015em; }
.hero__naslov, .glava-str h1, .clanak__glava h1 { letter-spacing: -.025em; }

/* fino zrno preko svega */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .04; filter: invert(1); }

/* nadnaslov s crticom */
.sekcija__glava .nadnaslov, .glava-str .nadnaslov, .hero .nadnaslov, .clanak__glava .nadnaslov { display: flex; align-items: center; gap: 12px; }
.sekcija__glava .nadnaslov::before, .glava-str .nadnaslov::before, .hero .nadnaslov::before, .clanak__glava .nadnaslov::before { content: ''; width: 28px; height: 1px; background: currentColor; flex: none; }

/* zaglavlje */
.zaglavlje { transition: border-color .3s ease, background-color .35s ease, box-shadow .3s ease; }
.zaglavlje.je-pomaknuto { box-shadow: 0 10px 30px -22px rgba(0,0,0,.5); }

/* gumbi */
.gumb--glavni { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.12); }
.gumb--glavni:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 22px -12px rgba(0,0,0,.55); }
.gumb--obrub:hover { transform: translateY(-1px); }
.poveznica .ui, .clanak-kartica__dalje .ui, .aparat-kartica__kit .ui, .lab-alat .ui { transition: transform .25s ease; }
.poveznica:hover .ui, .clanak-kartica:hover .clanak-kartica__dalje .ui, .aparat-kartica:hover .aparat-kartica__kit .ui, .lab-alat:hover .ui { transform: translateX(5px); }

/* kartice */
.kartica:hover { box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
.kartica__slika { position: relative; overflow: hidden; }
.kartica__slika::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%); pointer-events: none; }
.aparat-kartica, .kategorija, .clanak-kartica, .lab-alat, .kit-stupac { transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease; }

/* hero: ulazak */
@media (prefers-reduced-motion: no-preference) {
  .hero__in > * { animation: hero-u .8s cubic-bezier(.2,.8,.2,1) both; }
  .hero__in > :nth-child(2) { animation-delay: .08s; }
  .hero__in > :nth-child(3) { animation-delay: .16s; }
  .hero__in > :nth-child(4) { animation-delay: .24s; }
  .hero__in > :nth-child(5) { animation-delay: .32s; }
}
@keyframes hero-u { from { opacity: 0; transform: translateY(16px); } }

/* traka marki */
.brendovi { overflow: hidden; border-top: 1px solid var(--rub); padding: 18px 0; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.brendovi__traka { display: flex; width: max-content; animation: brendovi 48s linear infinite; }
.brendovi ul { display: flex; gap: 56px; list-style: none; margin: 0; padding: 0 28px; }
.brendovi li { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; font-style: italic; color: var(--tinta-3); white-space: nowrap; }
@keyframes brendovi { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .brendovi__traka { animation: none; } }

/* otkrivanje pri pomicanju */
.otkrij { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.otkrij.je-vidljivo { opacity: 1; transform: none; }

/* podnožje: veliki znak */
.podnozje { position: relative; overflow: hidden; }
.podnozje__dno { position: relative; }

/* sitnice */
.proizvod__slika { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 80px -50px rgba(0,0,0,.7); }

.nav a, .nav button, .nav summary { white-space: nowrap; }

/* prekidač jezika */
.jezik { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--rub); border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-decoration: none; color: var(--tinta-2); transition: color .2s ease, border-color .2s ease; }
.jezik:hover { color: var(--tinta); border-color: var(--tinta-3); }
.podnozje .jezik { color: inherit; border-color: rgba(238,232,223,.22); }

/* naslovnica: kućni espresso kutak */
.hero__art .art-pf, .mega__setup-art .art-scena { display: none; }
.hero__art { aspect-ratio: 560 / 460; width: min(46vw, 640px); opacity: 1; transform: translateY(-52%); }
.hero__art::before { inset: 8% 14% 14%; background: radial-gradient(closest-side, rgba(212,165,116,.20), transparent); }
.art-scena .sc-f { fill: var(--bg); transition: fill .35s ease; }
.art-scena .sc-t { fill: currentColor; }
.art-scena .sc-r { fill: var(--more); }
.art-scena .a { stroke: var(--krema); }
@media (prefers-reduced-motion: no-preference) {
  .art-scena .sc-mlaz { stroke-dasharray: 3 5; animation: mlaz 1.1s linear infinite; }
}
@keyframes mlaz { to { stroke-dashoffset: -16; } }
@media (max-width: 1099px) {
  .hero { flex-direction: column; align-items: stretch; justify-content: center; }
  .hero__art { display: block; position: relative; order: 3; right: auto; top: auto; transform: none; width: min(100% - 32px, 520px); margin: 44px auto 0; }
}

/* =====================================================================
   Tipografski sustav: dva pisma, jedna ljestvica
   Fraunces (naslovi) + Manrope (tekst, oznake, brojke). Sve u rem i clamp,
   pa se cijela stranica jednako ponaša pri zumiranju i većem tekstu.
   ===================================================================== */
:root {
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --mono: var(--sans);
  --t-oznaka: .72rem;                                  /* nadnaslovi, značke: velika slova */
  --t-sitno: .8125rem;                                 /* napomene, meta */
  --t-malo: .875rem;                                   /* podnaslov kartice, gumbi */
  --t-tekst: 1rem;                                     /* sadržaj */
  --t-uvod: clamp(1.05rem, .98rem + .35vw, 1.2rem);    /* uvodni odlomak */
  --t-n3: clamp(1.2rem, 1.12rem + .35vw, 1.4rem);      /* naslov kartice */
  --t-n2: clamp(1.85rem, 1.3rem + 2.3vw, 3rem);        /* naslov sekcije */
  --t-n1: clamp(2.3rem, 1.4rem + 4vw, 4.2rem);         /* naslov stranice */
  --t-hero: clamp(2.9rem, 1.3rem + 7.4vw, 6.6rem);     /* naslovnica */
}
body { font-variant-numeric: lining-nums; }
h1, h2, h3 { font-weight: 500; line-height: 1.08; letter-spacing: -.02em; font-optical-sizing: auto; overflow-wrap: break-word; }
h2 { font-size: var(--t-n2); }
h3 { font-size: var(--t-n3); line-height: 1.15; letter-spacing: -.012em; }
.glava-str h1, .clanak__glava h1 { font-size: var(--t-n1); }
.hero__naslov { font-size: var(--t-hero); line-height: .96; letter-spacing: -.03em; }
.hero__naslov em { font-weight: 400; }
.hero__tekst, .glava-str p:not(.nadnaslov), .tekst__uvod { font-size: var(--t-uvod); }
.tekst__uvod { font-family: var(--sans); line-height: 1.6; color: var(--tinta-2); }
.kartica__cijena, .kit-stupac__cijena, .hero__brojke dt, .m-cijena, .kategorija__broj { font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
.hero__brojke dt { font-weight: 600; font-size: 1.1rem; }
.brendovi li { font-size: 1.15rem; font-weight: 400; }

/* glava sekcije: nadnaslov, naslov, uvod, uvijek istim redom i u istim širinama */
.sekcija__glava h2 { max-width: 22ch; }
.sekcija__glava p:not(.nadnaslov) { max-width: 60ch; font-size: var(--t-uvod); }

/* =====================================================================
   Kartice: ista mjesta u svakoj kartici (oznaka, naslov, podnaslov, radnja)
   Redovi su poravnati kroz cijeli red mreže (subgrid).
   ===================================================================== */
.aparat-kartice, .mreza, .clanci, .kategorije, .lab-alati { gap: 1rem; }
.aparat-kartice { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.mreza { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.clanci { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.kategorije { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.lab-alati { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }

.aparat-kartica { padding: 1.5rem; min-height: 0; gap: 0; }
.aparat-kartica__mm {
  align-self: flex-start; justify-self: start; margin: 0 0 1.75rem; padding: .32rem .75rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--krema) 55%, transparent); color: var(--krema);
  font-family: var(--sans); font-size: var(--t-oznaka); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
}
.aparat-kartica__naziv { margin: 0; font-size: var(--t-n3); font-weight: 500; line-height: 1.15; letter-spacing: -.012em; text-wrap: balance; }
.aparat-kartica__opis { margin-top: .5rem; font-size: var(--t-sitno); line-height: 1.5; }
.aparat-kartica__kit { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--rub); justify-content: space-between; font-size: var(--t-malo); width: 100%; }
.aparat-kartica__kit .ui { flex: none; }
@supports (grid-template-rows: subgrid) {
  .aparat-kartica { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
  .aparat-kartica__kit { align-self: end; }
  .clanci > .clanak-kartica { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 0; }
}

.clanak-kartica { padding: 1.5rem; }
.clanak-kartica h3, .kartica h3, .kategorija__tekst strong, .lab-alat strong { font-size: var(--t-n3); font-weight: 500; line-height: 1.15; letter-spacing: -.012em; text-wrap: balance; }
.clanci > .clanak-kartica h3 { margin-top: .9rem; }
.clanci > .clanak-kartica p { margin-top: .5rem; }
.clanak-kartica p, .kartica__pod, .kategorija__tekst small, .lab-alat small { font-size: var(--t-malo); line-height: 1.5; }
.clanak-kartica__dalje { padding-top: .9rem; margin-top: 1.25rem; border-top: 1px solid var(--rub); justify-content: space-between; font-size: var(--t-malo); align-self: end; width: 100%; }
.clanci > .clanak-kartica .clanak-kartica__dalje { align-self: end; }
.kit-stupac h2 { font-size: clamp(1.45rem, 1.3rem + .6vw, 1.75rem); }
.kit-stupac__cijena { font-size: 1.35rem; font-weight: 600; }
.kit-stupac__za { font-size: var(--t-sitno); }
.kartica__cijena { font-weight: 600; }

/* =====================================================================
   Podnožje
   ===================================================================== */
.podnozje { padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 1.75rem; }
.podnozje::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #98111E 30%, #D4A574 70%, transparent); opacity: .7; }
.podnozje__in { gap: 3rem; }
@media (min-width: 820px) { .podnozje__in { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: 4rem; } }
.podnozje__slogan { margin-top: 1.25rem; font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem); font-weight: 400; line-height: 1.2; max-width: 14ch; color: var(--tamna-sek-tinta); text-wrap: balance; }
.podnozje__stupci { gap: 2.5rem 2rem; }
@media (min-width: 560px) { .podnozje__stupci { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 560px) {
  .podnozje__stupci > :nth-child(2) { column-count: 2; column-gap: 2rem; }
  .podnozje__stupci > :nth-child(2) h4 { column-span: all; }
  .podnozje__stupci > :nth-child(2) a { break-inside: avoid; }
}
.podnozje h4 { margin-bottom: 1.1rem; }
.podnozje__stupci a, .podnozje__stupci p { font-size: var(--t-malo); padding: .3rem 0; transition: color .2s ease, transform .2s ease; }
.podnozje__stupci a:hover { transform: translateX(3px); }
.podnozje__dno { margin-top: 1.5rem; }
@media (max-width: 599px) { .aparat-kartica { padding: 1.15rem 1.25rem; } .aparat-kartica__mm { margin-bottom: 1rem; } .aparat-kartica__kit { margin-top: 1rem; } }

/* birač modela: skupine zadržavaju svoju visinu, popis se skrola */
.modeli__popis { grid-auto-rows: max-content; align-content: start; max-height: 26rem; }


/* =====================================================================
   Kupnja: brzi odabir, košarica, kit
   ===================================================================== */
.odabir { border: 0; padding: 0; margin: auto; width: min(100% - 32px, 30rem); max-height: min(88vh, 46rem); border-radius: 20px; background: var(--povrsina); color: var(--tinta); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); overflow: auto; }
.odabir::backdrop { background: rgba(10,8,7,.55); backdrop-filter: blur(3px); }
.odabir__forma { display: grid; gap: 1.1rem; padding: 1.4rem; }
.odabir__glava { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.odabir__slika { width: 4.5rem; height: 4.5rem; border-radius: 14px; background: #2A2420; display: grid; place-items: center; padding: .4rem; }
.odabir__slika .art { width: 100%; height: 100%; }
.odabir__glava h2 { font-size: var(--t-n3); margin: .15rem 0 0; }
.odabir__glava .nadnaslov { margin: 0; }
.odabir__glava .nadnaslov::before { display: none; }
.odabir__cijena { margin: .2rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.odabir__zatvori { align-self: start; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--rub); background: transparent; color: var(--tinta); cursor: pointer; }
.odabir__skupina { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.odabir__skupina legend { font-size: var(--t-oznaka); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: .5rem; }
.odabir__skupina--red { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.odabir__opcija { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--rub); border-radius: 14px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.odabir__opcija:hover { border-color: var(--rub-jak); }
.odabir__opcija:has(input:checked) { border-color: var(--krema); background: color-mix(in srgb, var(--krema) 8%, transparent); }
.odabir__opcija input { margin-top: .2rem; accent-color: var(--more); }
.odabir__opcija span { display: grid; gap: .15rem; min-width: 0; }
.odabir__opcija small { font-size: var(--t-sitno); color: var(--tinta-3); line-height: 1.4; }
.odabir__opcija.je-rasprodano { opacity: .45; cursor: not-allowed; }
.odabir__pomoc { margin: 0; font-size: var(--t-sitno); color: var(--tinta-3); text-align: center; }
@media (max-width: 599px) {
  .odabir { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 90vh; border-radius: 20px 20px 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .odabir[open] { animation: odabir-u .28s cubic-bezier(.2,.8,.2,1); }
  @media (max-width: 599px) { .odabir[open] { animation: odabir-gore .32s cubic-bezier(.2,.8,.2,1); } }
}
@keyframes odabir-u { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes odabir-gore { from { transform: translateY(100%); } }

.stavka__upozorenje { margin: .35rem 0 0; font-size: var(--t-sitno); color: var(--more); line-height: 1.45; }
:root[data-theme="dark"] .stavka__upozorenje { color: #E0606C; }
.stavka__upozorenje button { margin-left: .25rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.stavka__kasnije { justify-self: start; margin: .3rem 0 0; padding: 0; border: 0; background: none; color: var(--tinta-3); font: inherit; font-size: var(--t-sitno); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.stavka__kasnije:hover { color: var(--tinta); }
.sazetak__podijeli { margin-top: .6rem; }

.u-kitu { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; margin-top: .9rem; padding: .75rem .9rem; border: 1px solid var(--rub); border-radius: 14px; text-decoration: none; color: var(--tinta-2); font-size: var(--t-malo); line-height: 1.45; transition: border-color .2s ease; }
.u-kitu:hover { border-color: var(--krema); }
.u-kitu strong { color: var(--tinta); }
.u-kitu__slika { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; }
.u-kitu__slika .art { width: 100%; height: auto; }
.u-kitu__strelica { color: var(--krema); }


/* =====================================================================
   Znak „Bura kroz V”: V u boji teksta, bura i crema u brand bojama
   ===================================================================== */
.logo { gap: 9px; color: var(--tinta); }
.logo__znak { width: 34px; height: 34px; color: var(--tinta); --znak-bura: #98111E; --znak-crema: #D4A574; }
:root[data-theme="dark"] .logo__znak { --znak-bura: #C8323F; }
.logo__rijec { font-weight: 500; font-size: 1.7rem; letter-spacing: .03em; padding-left: 0; line-height: 1; }
@media (max-width: 479px) { .logo__rijec { font-size: 1.5rem; letter-spacing: .02em; } .logo__znak { width: 30px; height: 30px; } }
.podnozje .logo, .podnozje .logo__znak { color: #EEE8DF; }
.podnozje .logo__znak { --znak-bura: #C8323F; }
.hvala__znak { color: var(--tinta); --znak-bura: #98111E; }