/* Fontovi sa našeg servera (Inter varijabilni 400–800, JetBrains Mono 700; SIL OFL), bez spoljnog zahtjeva koji blokira prikaz.
   Smanjeni na potrebne znakove: č ć š ž đ posebno (3,5 KB), a JetBrains Mono samo slova naziva u logou (pyftsubset). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/inter-ext-me.woff2') format('woff2'); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Rezervni font istih dimenzija kao Inter: kad Inter stigne, tekst se ne pomjera */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica'); size-adjust: 107.06%; ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/jbmono-brand.woff2') format('woff2'); }
/* Wise-inspirisan sistem: krupna tipografija, mnogo prostora, ravne sive površine,
   pill kontrole. Wise zelenu zamjenjuje Euromodel plava. */
:root {
  --primary: #0a4da2;
  --primary-hover: #083f86;
  --primary-ink: #052a5c;
  --primary-soft: #dfeaff;
  --primary-softer: #f0f5ff;

  --ink: #0e0f0c;
  --ink-2: #454745;
  --ink-3: #6a6c6a;
  --bg: #ffffff;
  --surface: #f4f5f3;          /* Wise background-neutral */
  --surface-2: #e9eae7;
  --border: rgba(14, 15, 12, 0.10);

  --up: #a8200d;
  --up-bg: #fde8e4;
  --down: #2f5711;
  --down-bg: #e3f5d6;
  --warn-bg: #fff4cc;
  --warn-ink: #4a3b00;

  --radius: 28px;
  --radius-md: 20px;
  --space-section: 104px;
  --font: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (max-width: 719px) { :root { --space-section: 72px; --radius: 24px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55;
  color: var(--ink); background: var(--bg); font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 10px; }
code { font-size: .9em; background: var(--surface); padding: 2px 6px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) { .wrap { padding: 0 40px; } }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); }
.topbar-inner { display: flex; align-items: center; gap: 32px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 16px; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { padding: 9px 16px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.nav a:hover { background: var(--surface); color: var(--ink); }
.nav a[aria-current='page'] { background: var(--surface); color: var(--ink); }
@media (max-width: 719px) {
  .topbar-inner { height: auto; flex-wrap: wrap; gap: 12px 16px; padding-block: 14px 10px; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 16px; }
  .price-mode { margin-left: auto; }
}

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-weight: 600; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--surface-2); transition: background .2s; }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--primary); outline-offset: 2px; }

.banner { background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; text-align: center; padding: 10px 20px; }

/* ---------- typography ---------- */
h1, h2, h3 { margin: 0; letter-spacing: -0.03em; line-height: 1.1; font-weight: 800; }
h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.04em; }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.display { font-size: clamp(72px, 13vw, 140px); font-weight: 800; letter-spacing: -0.06em; line-height: .9; }
.lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; margin: 16px 0 0; }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }
.label { font-size: 14px; font-weight: 600; color: var(--ink-3); }

main.wrap { padding-block: 40px 80px; outline: none; }
.section { margin-top: var(--space-section); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 32px; }
.section-head p { margin: 8px 0 0; color: var(--ink-3); }

/* ---------- hero ---------- */
.hero { --hero-bg: var(--primary-soft); --hero-ink: var(--primary-ink); border-radius: 36px; background: var(--hero-bg); color: var(--hero-ink); transition: background .3s; padding: 48px 28px; display: grid; gap: 48px; }
@media (min-width: 900px) { .hero { padding: 72px 64px; grid-template-columns: 1.4fr 1fr; align-items: end; } }
.hero .label { color: inherit; opacity: .7; }
.hero .display { margin: 20px 0 16px; }
.hero-text { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; max-width: 22ch; margin: 0; }
.hero-side { display: grid; }
.hero-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.hero-line:last-child { padding-bottom: 0; }
.hero-line span { opacity: .75; }
.hero-line b { font-size: 26px; letter-spacing: -0.03em; white-space: nowrap; }

/* ---------- KPI ---------- */
.kpis { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 16px; }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi { background: var(--surface); border-radius: var(--radius); padding: 32px; }
.kpi-value { font-size: 40px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin: 16px 0 14px; }
.kpi-foot { font-size: 14px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); line-height: 1.4; }
.chip.up { background: var(--up-bg); color: var(--up); }
.chip.down { background: var(--down-bg); color: var(--down); }
.chip.sale { background: var(--primary-soft); color: var(--primary-ink); }

/* ---------- segmented ---------- */
.segmented { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented button { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed='true'] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.10); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; font-weight: 700; cursor: pointer; text-decoration: none; background: var(--primary); color: #fff; }
.btn:hover { background: var(--primary-hover); }
.btn.secondary { background: var(--surface); color: var(--ink); }
.btn.secondary:hover { background: var(--surface-2); }
.back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 8px 0; }
.back:hover { color: var(--ink); }
.center { text-align: center; margin-top: 40px; }

/* ---------- surfaces ---------- */
.panel { background: var(--surface); border-radius: var(--radius); padding: 32px; }
@media (max-width: 719px) { .panel { padding: 22px; } }

/* ---------- chart ---------- */
.chart-box { position: relative; height: 340px; }
@media (max-width: 719px) { .chart-box { height: 260px; } }

/* ---------- lists ---------- */
.list { display: grid; }
.row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 16px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: 0; }
.row:hover .row-title { color: var(--primary); }
.thumb { width: 52px; height: 52px; border-radius: 50%; background: #fff; object-fit: contain; padding: 6px; box-shadow: inset 0 0 0 1px var(--border); }
.row-title { font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: 14px; color: var(--ink-3); margin-top: 2px; display: flex; gap: 8px; align-items: center; }
.row-end { text-align: right; display: grid; gap: 4px; justify-items: end; }
.price { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.old { color: var(--ink-3); text-decoration: line-through; font-size: 13px; }

.movers { display: grid; gap: 16px; }
@media (min-width: 900px) { .movers { grid-template-columns: 1fr 1fr; } }
.movers .panel h3 { margin-bottom: 4px; }
.movers .panel > p { margin: 0 0 12px; }

/* ---------- catalog ---------- */
.search { position: relative; display: block; margin-top: 32px; }
.search input {
  width: 100%; height: 64px; border-radius: 999px; border: 0; background: var(--surface);
  padding: 0 28px 0 60px; font-size: 18px;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; box-shadow: 0 0 0 3px var(--primary); background: var(--bg); }
.search svg { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 20px 0 4px; margin: 0 -20px; padding-inline: 20px; }
.pill { flex: none; border: 1px solid var(--border); background: var(--bg); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.pill:hover { border-color: var(--ink-3); color: var(--ink); }
.pill[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 24px 0 8px; }
.filters-left { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.select { height: 46px; border-radius: 999px; border: 0; background: var(--surface); padding: 0 40px 0 18px; font-weight: 600; font-size: 14px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236a6c6a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.select:focus { outline: none; box-shadow: 0 0 0 3px var(--primary); }
.count { font-size: 14px; color: var(--ink-3); margin: 24px 0 0; }

/* ---------- product ---------- */
.product-head { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 760px) { .product-head { grid-template-columns: 220px 1fr; gap: 48px; align-items: center; } }
.product-img { width: 220px; height: 220px; border-radius: var(--radius); background: #fff; object-fit: contain; padding: 24px; box-shadow: inset 0 0 0 1px var(--border); }
@media (max-width: 759px) { .product-img { width: 160px; height: 160px; } }
.product-head h1 { font-size: clamp(28px, 3.6vw, 40px); margin: 10px 0 24px; max-width: 24ch; }
.price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.big-price { font-size: 56px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.changes { display: grid; grid-template-columns: repeat(3, 1fr); }
.changes > div { padding: 4px 24px; border-left: 1px solid var(--border); }
.changes > div:first-child { border-left: 0; padding-left: 0; }
.changes .chip { margin: 12px 0 8px; font-size: 15px; padding: 4px 12px; }
@media (max-width: 599px) { .changes > div { padding: 4px 12px; } }
.facts { display: flex; gap: 12px 32px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 15px; color: var(--ink-2); }
.facts b { color: var(--ink); }

/* ---------- basket summary ---------- */
.equation { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .equation { grid-template-columns: 1fr auto 1fr auto 1fr; } }
.equation .op { font-size: 28px; color: var(--ink-3); font-weight: 300; text-align: center; }
.equation .v { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; margin-top: 6px; }
.equation .total .v { color: var(--primary); }
.cover { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 17px; color: var(--ink-2); }
.cover b { color: var(--ink); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 16px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font-size: 13px; font-weight: 600; color: var(--ink-3); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
td.num, th.num { text-align: right; }
tr.group td { padding-top: 36px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; border-bottom: 1px solid var(--ink); }
tfoot td { font-weight: 800; font-size: 17px; border-bottom: 0; padding-top: 24px; }
td.name { white-space: normal; min-width: 200px; }
td.name a { color: var(--ink); text-decoration: none; font-weight: 600; }
td.name a:hover { color: var(--primary); }

.prose { max-width: 68ch; }
.prose p, .prose li { color: var(--ink-2); font-size: 17px; }
.prose li + li { margin-top: 8px; }
.prose h2 { margin: 64px 0 16px; font-size: 26px; }
.formula { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; line-height: 1.8; background: var(--surface); padding: 24px 28px; border-radius: var(--radius-md); overflow-x: auto; color: var(--ink); }

.empty { padding: 56px 24px; text-align: center; color: var(--ink-3); }
.skeleton { height: 18px; border-radius: 10px; background: linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface)); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.footer { padding-block: 40px 56px; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink-3); }
.footer p { margin: 0; }

/* ---------- prikaz cijena (MP / akcijska) ---------- */
.price-mode button { padding: 8px 14px; font-size: 13px; }
@media (max-width: 719px) { .price-mode { margin-left: auto; } }

/* učitavanje bez treperenja: blago zatamnjenje tek ako odgovor kasni */
.list { transition: opacity .15s ease .2s; }
.list.is-loading { opacity: .5; }

/* ---------- trenutno stanje (osnovne namirnice) ---------- */
.staples { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .staples { grid-template-columns: repeat(2, 1fr); } }
.staples .panel { padding: 28px; }
.staples h3 { margin-bottom: 8px; }
.row.compact { grid-template-columns: 40px minmax(0, 1fr) auto 96px; gap: 12px; padding: 10px 0; }
.row.compact .thumb { width: 40px; height: 40px; padding: 4px; }
.row.compact .row-title { font-weight: 500; font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row.compact .price { font-size: 15px; font-weight: 600; }
.row-chip { justify-self: end; }

td.name .item { display: inline-flex; align-items: center; gap: 14px; }
td.name .thumb { width: 40px; height: 40px; padding: 4px; flex: none; }

/* ---------- footer ---------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; background: var(--surface); margin-top: 40px; padding: 72px 0 32px; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 64px; } }
.footer-text { color: var(--ink-2); max-width: 34ch; margin: 16px 0 0; }
.footer-nav { display: grid; gap: 10px; align-content: start; font-size: 15px; color: var(--ink-2); }
.footer-nav .label { margin-bottom: 4px; }
.footer-nav a { color: var(--ink); text-decoration: none; font-weight: 500; width: fit-content; }
.footer-nav a:hover { color: var(--primary); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink-3); }
.footer-bottom a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.footer-bottom a:hover { color: var(--primary); }

/* ---------- analitika ---------- */
.hero-sub { margin: 16px 0 0; max-width: 46ch; font-size: 16px; opacity: .8; }
.hero-line span small { display: block; font-size: 13px; opacity: .8; margin-top: 2px; }
.hero-line.total { border-top: 2px solid currentColor; }
.hero-line.total span { opacity: 1; font-weight: 700; }
.hero-line.total b { font-size: 30px; }
.kpi-text { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.kpi-text b { color: var(--ink); }
.kpi { display: flex; flex-direction: column; }
.kpi-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }

.facts-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .facts-grid { grid-template-columns: 1fr 1fr; } }
.fact p { color: var(--ink-2); margin: 12px 0 0; font-size: 15px; }
.fact-value { font-size: 44px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin-top: 14px; }
.fact-value span { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-3); }
.meter { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-2); margin-top: 24px; }
.meter .m-food { background: var(--primary); }
.meter .m-other { background: color-mix(in srgb, var(--primary) 45%, white); }
.meter-legend { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.meter-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--surface-2); vertical-align: -1px; }
.meter-legend i.m-food { background: var(--primary); }
.meter-legend i.m-other { background: color-mix(in srgb, var(--primary) 45%, white); }

.hour-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
@media (min-width: 560px) { .hour-list { grid-template-columns: repeat(3, 1fr); } }
.hour-item { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: var(--bg); text-decoration: none; color: inherit; }
.hour-item:hover { box-shadow: 0 0 0 2px var(--primary-soft); }
.hour-item .thumb { width: 40px; height: 40px; padding: 4px; grid-row: span 2; }
.hour-qty { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.hour-name { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.hour-name small { display: block; color: var(--ink-3); }

.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 210px) 1fr auto; gap: 16px; align-items: center; font-size: 15px; }
.bar-label { color: var(--ink-2); }
.bar-track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.bar-value { font-weight: 700; white-space: nowrap; min-width: 112px; text-align: right; }
.bar-value small { color: var(--ink-3); font-weight: 500; margin-left: 4px; }
@media (max-width: 599px) { .bar-row { grid-template-columns: 1fr auto; } .bar-track { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- brend: avg(korpa) ---------- */
.brand-name { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.brand-name .paren { color: var(--primary); }
.brand-mark { font-family: 'Inter', serif; font-style: italic; font-weight: 700; font-size: 17px; }

/* =====================================================================
   MOBILE FIRST: osnovna pravila iznad, ovdje telefon (< 720px)
   ===================================================================== */
.nav svg { display: none; }
.lbl-short, .show-sm { display: none; }
td.name small.show-sm, td.name .item small.show-sm { font-weight: 500; }

@media (max-width: 719px) {
  :root { --space-section: 56px; --radius: 22px; }
  .wrap { padding: 0 16px; }
  body { font-size: 15px; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

  /* zaglavlje: jedan red */
  .topbar { backdrop-filter: none; background: var(--bg); border-bottom: 1px solid var(--border); } /* inače fixed nav postaje relativan na header */
  .topbar-inner { flex-wrap: nowrap; height: 60px; padding-block: 0; gap: 12px; }
  .brand-mark { width: 30px; height: 30px; font-size: 15px; }
  .brand-name { font-size: 16px; }
  .price-mode { margin-left: auto; padding: 3px; }
  .price-mode button { padding: 7px 12px; font-size: 13px; }
  .lbl-long { display: none; }
  .lbl-short { display: inline; }

  /* navigacija: donja traka */
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; order: 0; margin: 0; flex-basis: auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; overflow: visible;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
  }
  .nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 14px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
  .nav a:hover { background: none; }
  .nav a[aria-current='page'] { background: none; color: var(--primary); }
  .nav svg { display: block; width: 24px; height: 24px; }
  .nav a[aria-current='page'] svg { stroke-width: 2.1; }

  .banner { font-size: 13px; padding: 8px 16px; }
  main.wrap { padding-block: 20px 40px; }

  /* tipografija */
  h1 { font-size: 32px; }
  h2 { font-size: 23px; }
  .lead { font-size: 16px; margin-top: 10px; }
  .section-head { margin-bottom: 20px; gap: 14px; }
  .section-head .segmented { width: 100%; }
  .section-head .segmented button { flex: 1; }

  /* hero */
  .hero { padding: 28px 20px 24px; border-radius: 28px; gap: 28px; }
  .hero .display { font-size: 84px; margin: 12px 0 12px; }
  .hero-text { font-size: 18px; max-width: none; }
  .hero-sub { font-size: 14px; }
  .hero-line { padding: 14px 0; align-items: center; }
  .hero-line span { font-size: 14px; }
  .hero-line span small { font-size: 12px; }
  .hero-line b { font-size: 20px; }
  .hero-line.total b { font-size: 24px; }

  /* kartice i paneli */
  .kpis { gap: 12px; margin-top: 12px; }
  .kpi { padding: 22px 20px; }
  .kpi-value { font-size: 34px; margin: 10px 0 10px; }
  .kpi-text { font-size: 14px; margin-bottom: 12px; }
  .kpi-foot { padding-top: 12px; }
  .panel, .staples .panel { padding: 20px; }
  .facts-grid, .movers, .staples { gap: 12px; }
  .fact-value { font-size: 34px; }
  .fact p { font-size: 14px; }
  .hour-list { gap: 8px; }
  .hour-item { padding: 10px; column-gap: 8px; }
  .hour-qty { font-size: 19px; }
  .bar-row { gap: 6px 12px; font-size: 14px; }
  .bar-value { min-width: 0; }
  .chart-box { height: 280px; }
  .center { margin-top: 28px; }
  .center .btn { width: 100%; }

  /* liste */
  .row { gap: 12px; padding: 12px 0; grid-template-columns: 44px minmax(0, 1fr) auto; }
  .thumb { width: 44px; height: 44px; padding: 5px; }
  .row-title { font-size: 15px; }
  .row-meta { font-size: 13px; }
  .price { font-size: 16px; }
  .row.compact { grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 10px; }
  .row.compact .thumb { width: 36px; height: 36px; }
  .row.compact .row-title { font-size: 14px; }
  .row-chip .muted { display: none; }

  /* katalog */
  .search { margin-top: 20px; }
  .search input { height: 54px; font-size: 16px; padding-left: 52px; }
  .search svg { left: 20px; }
  .pills { margin: 0 -16px; padding: 14px 16px 2px; }
  .pill { padding: 8px 14px; font-size: 13px; }
  .filters { margin: 16px 0 4px; gap: 12px; }
  .filters-left { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .filters-left .select { flex: 1; min-width: 0; height: 42px; padding: 0 30px 0 14px; font-size: 13px; background-position: right 12px center; }
  .filters-left .segmented button { padding: 8px 11px; font-size: 13px; }
  .count { margin-top: 12px; }

  /* artikal */
  .product-head { grid-template-columns: 96px 1fr; gap: 16px; align-items: start; margin-top: 12px; }
  .product-img { width: 96px; height: 96px; padding: 10px; border-radius: 20px; }
  .product-head h1 { font-size: 22px; margin: 6px 0 14px; letter-spacing: -0.03em; }
  .big-price { font-size: 38px; }
  .price-line { gap: 8px; }
  .changes > div { padding: 2px 10px; }
  .changes .chip { font-size: 13px; padding: 3px 9px; margin: 8px 0 6px; }
  .facts { gap: 8px 20px; margin-top: 18px; padding-top: 16px; font-size: 14px; }

  /* korpa */
  .equation { gap: 14px; }
  .equation .v { font-size: 28px; }
  .equation .op { font-size: 22px; line-height: 1; text-align: left; }
  .cover { font-size: 15px; margin-top: 20px; padding-top: 18px; }

  /* tabele: bez horizontalnog skrola */
  table { font-size: 14px; }
  th, td { padding: 12px 6px; }
  .hide-sm { display: none; }
  .show-sm { display: block; }
  td.name small.show-sm { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
  td.num .show-sm { margin-top: 4px; }
  td.name { min-width: 0; white-space: normal; }
  td.name .item { gap: 10px; }
  td.name .thumb { width: 34px; height: 34px; }
  tr.group td { padding-top: 24px; font-size: 15px; }
  td .chip { font-size: 12px; padding: 2px 8px; }

  /* footer */
  .site-footer { padding: 44px 0 24px; margin-top: 24px; }
  .footer-grid { gap: 28px; grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { margin-top: 32px; }

  .prose p, .prose li { font-size: 16px; }
  .prose h2 { margin: 44px 0 12px; font-size: 22px; }
  .formula { font-size: 12px; padding: 16px; }
}

/* ---------- pet godina ---------- */
.h5-stats { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 760px) { .h5-stats { grid-template-columns: repeat(3, 1fr); } }
.h5-stats > div { background: var(--surface); border-radius: var(--radius-md); padding: 18px 20px; display: grid; gap: 6px; justify-items: start; }
.h5-stats b { font-size: 19px; letter-spacing: -0.02em; }
.meter-legend i.dash { background: none; border-top: 2px dashed var(--primary); height: 0; width: 16px; border-radius: 0; vertical-align: 3px; }

/* ---------- trend kupovne moći u hero sekciji ---------- */
.hero-trend {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  margin: 8px -64px -72px; padding: 18px 64px; border-radius: 0 0 36px 36px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  background: color-mix(in srgb, var(--hero-ink) 8%, transparent);
}
.hero-trend-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; flex: none; background: var(--hero-ink); color: var(--hero-bg); }
.hero.trend-down .hero-trend { background: #b3261e; color: #fff; }
.hero.trend-down .hero-trend-icon { background: #fff; color: #b3261e; }
@media (max-width: 899px) { .hero-trend { margin: 0 -28px -48px; padding: 16px 28px; } }
@media (max-width: 719px) { .hero-trend { margin: 0 -20px -24px; padding: 14px 20px; font-size: 14px; border-radius: 0 0 28px 28px; } }

.h5-stat { gap: 10px !important; }
.h5-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.h5-pair > div { display: grid; gap: 2px; }
.h5-pair > div + div { padding-left: 12px; border-left: 1px solid var(--border); }
.h5-pair small { font-size: 12px; color: var(--ink-3); }
.h5-pair b { font-size: 19px; letter-spacing: -0.02em; }

/* ---------- Heroicons ---------- */
.hi { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.hi-sm { width: 18px; height: 18px; }
.hi-xs { width: 14px; height: 14px; }
.chip .hi-xs { margin-right: 2px; }
.back { gap: 4px; padding: 8px 14px 8px 8px; margin-left: -8px; border-radius: 999px; }
.back:hover { background: var(--surface); }
.to-top { display: inline-flex; align-items: center; gap: 6px; }
.hero-trend-icon .hi { width: 16px; height: 16px; }

/* ---------- katalog: filteri i kartice ---------- */
.search .search-icon { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: var(--ink-3); width: 22px; height: 22px; }
.search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 0; background: var(--surface-2); color: var(--ink-2); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.search-clear:hover { background: var(--border); color: var(--ink); }
.search-clear[hidden] { display: none; }
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; padding: 8px; border-radius: 22px; background: var(--surface); }
.fb-select, .fb-group { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 16px; padding: 4px 6px 4px 14px; min-height: 48px; color: var(--ink-3); }
.fb-label { font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.fb-select select { border: 0; background: transparent; font-weight: 700; font-size: 14px; color: var(--ink); padding: 8px 30px 8px 2px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%236a6c6a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-size: 16px; background-repeat: no-repeat; background-position: right 8px center; }
.fb-select select:focus { outline: none; }
.fb-select:focus-within { box-shadow: 0 0 0 3px var(--primary); }
.fb-group .segmented { background: var(--surface); }
.chip-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 48px; padding: 0 18px; border-radius: 16px; border: 0; background: var(--bg); color: var(--ink-2); font-weight: 700; font-size: 14px; cursor: pointer; }
.chip-toggle:hover { color: var(--ink); }
.chip-toggle[aria-pressed='true'] { background: var(--primary); color: #fff; }
.count { margin: 20px 0 12px; }

.pgrid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); transition: opacity .15s ease .2s; }
.pgrid.is-loading { opacity: .5; }
@media (min-width: 720px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pgrid .empty { grid-column: 1 / -1; }
.pcard { display: flex; flex-direction: column; border-radius: 22px; background: var(--surface); color: inherit; text-decoration: none; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.pcard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14, 15, 12, .08); }
.pcard-img { position: relative; margin: 8px 8px 0; aspect-ratio: 4 / 3; border-radius: 16px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.pcard-img img { width: 78%; height: 78%; object-fit: contain; }
.pcard-badge { position: absolute; top: 10px; left: 10px; background: var(--primary); color: #fff; font-weight: 800; font-size: 13px; padding: 4px 9px; border-radius: 999px; }
.pcard-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.pcard-cat { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-name { font-weight: 600; font-size: 15px; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
.pcard-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pcard-price .price { font-size: 19px; font-weight: 800; }
.pcard-price .unit { font-size: 13px; color: var(--ink-3); }
@media (max-width: 719px) {
  .filterbar { padding: 6px; gap: 6px; border-radius: 20px; }
  .fb-select, .fb-group { min-height: 44px; padding-left: 10px; }
  .fb-select { flex: 1 1 100%; }
  .fb-select select { flex: 1; }
  .fb-group { flex: 1 1 auto; }
  .fb-group .fb-label, .fb-group > .hi { display: none; }
  .fb-group .segmented button { padding: 7px 10px; font-size: 13px; }
  .chip-toggle { min-height: 44px; padding: 0 14px; margin-left: 0; }
  .pgrid { gap: 10px; }
  .pcard { border-radius: 18px; }
  .pcard-img { margin: 6px 6px 0; border-radius: 13px; }
  .pcard-body { padding: 10px 12px 12px; }
  .pcard-name { font-size: 14px; }
  .pcard-price .price { font-size: 17px; }
}

/* ---------- kalkulator ---------- */
.calc { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .calc { grid-template-columns: 5fr 7fr; } }
.calc-form { display: grid; gap: 4px; }
.calc-row, .calc-field { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.calc-field:last-child { border-bottom: 0; }
.calc-label { font-weight: 600; font-size: 15px; display: grid; gap: 2px; }
.calc-label small { font-weight: 500; font-size: 12px; color: var(--ink-3); }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border-radius: 999px; padding: 4px; }
.stepper button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.stepper button:hover { background: var(--primary-soft); color: var(--primary-ink); }
.stepper output { min-width: 28px; text-align: center; font-weight: 800; font-size: 17px; }
.money { position: relative; display: inline-flex; align-items: center; }
.money input { width: 132px; height: 46px; border-radius: 14px; border: 0; background: var(--bg); padding: 0 34px 0 14px; font-size: 16px; font-weight: 700; text-align: right; -moz-appearance: textfield; }
.money input::-webkit-outer-spin-button, .money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.money input:focus { outline: none; box-shadow: 0 0 0 3px var(--primary); }
.money span { position: absolute; right: 14px; color: var(--ink-3); font-weight: 600; pointer-events: none; }
.calc-out { display: grid; gap: 16px; }
.calc-result { --res: var(--primary); }
.calc-result.calc-ok { background: #e7f6dc; } .calc-result.calc-ok .calc-big { color: #1f5a0b; }
.calc-result.calc-tight { background: #fff3cf; } .calc-result.calc-tight .calc-big { color: #6b4e00; }
.calc-result.calc-short { background: #fde4df; } .calc-result.calc-short .calc-big { color: #a3200f; }
.calc-big { font-size: 52px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 8px 0 8px; }
.calc-status { margin: 0 0 18px; font-weight: 600; color: var(--ink-2); }
.calc-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: rgba(14,15,12,.08); }
.calc-bar span { display: block; height: 100%; }
.cb-food { background: var(--primary); }
.cb-other { background: color-mix(in srgb, var(--primary) 50%, white); }
.cb-rent { background: #7c5cd6; }
.cb-extra { background: #c4a6ff; }
.cb-left { background: #3d9a2b; }
.cb-short { background: #c0362c; }
.calc-legend { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.calc-legend li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; font-size: 15px; }
.calc-legend i { width: 12px; height: 12px; border-radius: 4px; }
.calc-legend li.calc-sum { padding-top: 8px; border-top: 1px solid rgba(14,15,12,.12); font-weight: 700; }
.calc-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(14,15,12,.12); }
.calc-facts > div { display: grid; gap: 4px; }
.calc-facts b { font-size: 18px; letter-spacing: -0.02em; }
.calc-time h3, .calc-time .h3 { margin-bottom: 4px; }
.calc-time table { margin-top: 8px; }
tr.calc-now td { font-weight: 800; border-bottom: 0; }
@media (max-width: 719px) {
  .money input { width: 116px; height: 44px; }
  .calc-big { font-size: 42px; }
  .calc-facts { grid-template-columns: 1fr 1fr; }
  .calc-facts > div:first-child { grid-column: 1 / -1; }
  .calc-label { font-size: 14px; }
}

.search-clear .hi { display: block; }
@media (max-width: 719px) { .topbar-inner { justify-content: space-between; } }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* ---------- kalkulator: stavke troškova ---------- */
.calc-group { margin-top: 18px; }
.calc-group-head { display: grid; gap: 2px; padding: 4px 0 8px; }
.calc-group-head span { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.calc-group-head small { font-size: 12px; color: var(--ink-3); }
.cost { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; margin: 0 -10px; border-radius: 14px; cursor: pointer; }
.cost:hover { background: rgba(14,15,12,.04); }
.cost-cb { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cost-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border); background: var(--bg); display: grid; place-items: center; color: transparent; transition: background .15s, border-color .15s; }
.cost.is-on .cost-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.cost-check.is-fixed { background: var(--ink-3); border-color: var(--ink-3); color: #fff; }
.cost-cb:focus-visible + .cost-check { outline: 3px solid var(--primary); outline-offset: 2px; }
.cost-label { font-size: 14px; font-weight: 600; display: grid; gap: 1px; line-height: 1.3; }
.cost-label small { font-weight: 500; font-size: 12px; color: var(--ink-3); }
.cost:not(.is-on) .cost-label { color: var(--ink-3); }
.money-sm input { width: 104px; height: 40px; font-size: 15px; border-radius: 12px; }
.money-sm input:disabled { opacity: .45; }
.money-sm input[readonly] { background: transparent; }
.cb-extra { background: #7c5cd6; }
.calc-legend li.calc-sub { font-size: 13px; color: var(--ink-3); padding-left: 22px; }
.calc-legend li.calc-sub i { display: none; }
@media (min-width: 900px) { .calc-out { position: sticky; top: 92px; } }
@media (max-width: 719px) { .money-sm input { width: 92px; } .cost { gap: 10px; } }

/* ---------- hero: boja po nivou pokrivenosti, traka po mjesečnom trendu ---------- */
.hero.lvl-bad  { --hero-bg: #fde0da; --hero-ink: #6a1206; }
.hero.lvl-warn { --hero-bg: #ffe9cc; --hero-ink: #5c3300; }
.hero.lvl-ok   { --hero-bg: var(--primary-soft); --hero-ink: var(--primary-ink); }
.hero.lvl-good { --hero-bg: #dff3d0; --hero-ink: #183f08; }
.hero-level { display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: color-mix(in srgb, var(--hero-ink) 10%, transparent); max-width: 100%; }
.hero.trend-up .hero-trend { background: #2f7d1f; color: #fff; }
.hero.trend-up .hero-trend-icon { background: #fff; color: #2f7d1f; }

/* ---------- kalkulator: vlastiti troškovi ---------- */
.custom-cost { grid-template-columns: 1fr auto 36px; cursor: default; }
.custom-name { min-width: 0; height: 40px; border: 0; border-radius: 12px; background: var(--bg); padding: 0 12px; font-size: 14px; font-weight: 600; }
.custom-name:focus, .custom-cost .money input:focus { outline: none; box-shadow: 0 0 0 3px var(--primary); }
.custom-del { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.custom-del:hover { background: var(--up-bg); color: var(--up); }
.add-cost { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px dashed var(--border); background: transparent; color: var(--primary); font-weight: 700; font-size: 14px; cursor: pointer; }
.add-cost:hover { border-color: var(--primary); background: var(--primary-softer); }
@media (min-width: 720px) { .nav { justify-content: center; } }

/* ---------- kalkulator kao stranica ---------- */
.header-cta { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.header-cta:hover { background: var(--primary-hover); }
.header-cta[aria-current='page'] { background: var(--primary-ink); }
.calc-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; text-decoration: none; color: inherit; background: var(--primary-soft); }
.calc-cta h2 { color: var(--primary-ink); }
.calc-cta p { margin: 8px 0 0; color: var(--ink-2); max-width: 52ch; }
.calc-dock, .sheet-close, .sheet-backdrop { display: none; }
@media (max-width: 719px) {
  .header-cta { height: 36px; padding: 0 12px; font-size: 13px; margin-left: auto; }
  .header-cta .lbl-short { display: inline; }
  /* rezultat je bottom sheet; pri dnu ekrana stoji sažetak */
  .calc { padding-bottom: 72px; }
  .calc-out { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 86vh; overflow-y: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
    background: var(--bg); border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.18); transform: translateY(105%); transition: transform .28s ease; }
  .calc-out.is-open { transform: translateY(0); }
  .sheet-close { display: grid; place-items: center; position: sticky; top: 0; margin: 0 0 8px auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); z-index: 2; }
  .sheet-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 45; }
  .calc-dock { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; position: fixed; left: 12px; right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 35; padding: 12px 16px; border: 0; border-radius: 18px; text-align: left; cursor: pointer;
    box-shadow: 0 8px 28px rgba(0,0,0,.16); background: var(--primary-soft); color: var(--ink); font: inherit; }
  .calc-dock.calc-ok { background: #dff3d0; } .calc-dock.calc-tight { background: #ffe9cc; } .calc-dock.calc-short { background: #fde0da; }
  .dock-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
  .calc-dock b { grid-row: 2; font-size: 22px; letter-spacing: -0.03em; }
  .dock-more { grid-row: 1 / span 2; grid-column: 2; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; color: var(--primary-ink); }
  body.sheet-open { overflow: hidden; }
}

/* ---------- mobilni: bez horizontalnog skrola i bez iOS zumiranja polja ---------- */
@media (max-width: 719px) {
  html, body { overflow-x: clip; max-width: 100%; }
  input, select, textarea { font-size: 16px !important; } /* iOS Safari zumira polja ispod 16px */
  .money-sm input, .custom-name { height: 42px; }
}

/* ---------- sheet: bez horizontalnog skrola, skrol ostaje unutar sheeta ---------- */
@media (max-width: 719px) {
  .calc-out { overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .calc-out > * { min-width: 0; max-width: 100%; }
  .calc-out .table-wrap { overflow-x: visible; }
  .calc-out table { table-layout: fixed; width: 100%; }
  .calc-out th, .calc-out td { white-space: normal; word-break: break-word; padding: 10px 4px; }
  .calc-out th:first-child, .calc-out td:first-child { width: 42%; }
  .calc-out .calc-facts { grid-template-columns: 1fr 1fr; }
  .calc-out .calc-legend li { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .calc-out .calc-legend span { overflow-wrap: anywhere; }
  .sheet-backdrop:not([hidden]) { touch-action: none; }
}

/* ---------- kalkulator: rezultat na vrhu (mobilni), sažetak pri dnu kad se skroluje ---------- */
.calc-head { align-items: flex-start; }
.icon-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
@media (max-width: 719px) {
  .calc { padding-bottom: 0; }
  .calc-out { position: static; order: -1; max-height: none; overflow: visible; padding: 0; background: none; border-radius: 0; box-shadow: none; transform: none; transition: none; z-index: auto; }
  .calc-head { flex-wrap: nowrap; }
  .calc-dock { opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .2s, transform .2s; }
  .calc-dock.is-visible { opacity: 1; transform: none; pointer-events: auto; }
}

/* kalkulator: dvije kolone od tableta naviše (lijevo unos, desno rezultat) */
@media (min-width: 720px) {
  .calc { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .calc-out { position: sticky; top: 92px; }
}

/* logo */
.brand-logo { width: 34px; height: 34px; flex: none; color: var(--primary); display: block; }
@media (max-width: 719px) { .brand-logo { width: 30px; height: 30px; } }

.policy-notes { margin: 16px 0 0; padding: 14px 0 0 18px; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink-2); }
.policy-notes li + li { margin-top: 6px; }
.policy-notes b { color: var(--warn-ink); }

/* grafikoni na telefonu: panel sa manje unutrašnjeg prostora, pa grafikon dobija širinu */
@media (max-width: 719px) {
  .panel:has(> .chart-box) { padding: 16px 12px 18px; }
  .panel:has(> .chart-box) .meter-legend, .panel:has(> .chart-box) .policy-notes { margin-left: 6px; margin-right: 6px; }
  .chart-box canvas { touch-action: pan-y; }
}
@media (max-width: 380px) { .chart-box { height: 260px; } }

/* ---------- katalog: pretraga i kategorije ---------- */
.search input { padding-right: 60px; }
.search-clear { right: 14px; width: 30px; height: 30px; background: var(--surface-2); color: var(--ink-2); }
.search input:focus ~ .search-clear { background: var(--surface); }
.search-clear .hi { width: 16px; height: 16px; }
@media (max-width: 719px) {
  .search input { padding-right: 52px; }
  .search-clear { right: 12px; width: 28px; height: 28px; }
}
.cat-pills { position: relative; scroll-behavior: auto; scroll-padding-inline: 20px; }
.cat-pills .pill { line-height: 1.2; }
/* traka se skroluje vodoravno: blago nestajanje na ivicama pokazuje da ima još kategorija */
@media (max-width: 1100px) {
  .cat-pills { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%); }
}
@media (min-width: 1101px) { .cat-pills { flex-wrap: wrap; overflow: visible; margin: 0; padding-inline: 0; } }
/* ikonica X nije lupa: bez apsolutne pozicije iz pravila .search svg */
.search .search-clear svg { position: static; transform: none; left: auto; top: auto; color: currentColor; }
.btn[hidden] { display: none; }

/* ---------- katalog: kategorije kao kartice, traka sa sortiranjem ---------- */
.ctiles { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; margin-top: 24px; }
@media (max-width: 1100px) { .ctiles { grid-template-columns: repeat(6, 1fr); } }
.ctile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 6px 10px; border: 1px solid transparent; border-radius: 20px;
  background: var(--surface); cursor: pointer; text-align: center; font: inherit; color: var(--ink); transition: background .15s, border-color .15s, transform .15s; }
.ctile:hover { background: var(--surface-2); }
.ctile:active { transform: scale(.97); }
.ctile:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.ctile-img { width: 100%; aspect-ratio: 5 / 4; border-radius: 14px; background: #fff; display: grid; place-items: center; margin-bottom: 8px; overflow: hidden; }
.ctile-img img { width: 76%; height: 76%; object-fit: contain; }
.ctile-img .hi { width: 30px; height: 30px; color: var(--primary); }
.ctile-all { background: var(--primary-soft); }
.ctile-name { font-size: 13px; font-weight: 700; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; }
.ctile-n { font-size: 12px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ctile[aria-pressed='true'] { background: var(--primary-softer); border-color: var(--primary); }
.ctile[aria-pressed='true'] .ctile-name { color: var(--primary-ink); }
.ctile[aria-pressed='true'] .ctile-n { color: var(--primary); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 28px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.toolbar .count { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--ink-2); }
.toolbar .count strong { font-weight: 500; }
.toolbar .count b { color: var(--ink); font-weight: 800; }
.toolbar .count span { font-size: 13px; color: var(--ink-3); }
.tb-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sort-chip { position: relative; display: inline-flex; align-items: center; height: 44px; border-radius: 999px; background: var(--surface); color: var(--ink-2); }
.sort-chip:hover { background: var(--surface-2); }
.sort-chip:focus-within { box-shadow: 0 0 0 3px var(--primary); }
.sort-chip > .hi:first-child { position: absolute; left: 16px; pointer-events: none; }
.sort-chip .sort-caret { position: absolute; right: 14px; pointer-events: none; }
.sort-chip select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; height: 100%; padding: 0 40px 0 42px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sort-chip select:focus { outline: none; }
.tb-controls .segmented { height: 44px; align-items: center; }

@media (max-width: 719px) {
  .ctiles { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; margin: 18px -16px 0; padding: 2px 16px 4px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .ctiles::-webkit-scrollbar { display: none; }
  .ctile { flex: none; width: 96px; padding: 8px 6px 10px; border-radius: 18px; }
  .ctile-img { border-radius: 12px; margin-bottom: 6px; }
  .ctile-name { font-size: 12.5px; }
  .toolbar { margin: 20px 0 12px; padding-bottom: 12px; }
  .toolbar { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .tb-controls { display: contents; }
  .sort-chip { grid-column: 2; grid-row: 1; height: 40px; }
  .sort-chip select { font-size: 16px; padding: 0 34px 0 38px; max-width: 200px; }
  .sort-chip > .hi:first-child { left: 13px; }
  .sort-chip .sort-caret { right: 11px; }
  .tb-controls .segmented { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 42px; }
  .tb-controls .segmented button { flex: 1; padding: 8px 10px; font-size: 14px; }
}
/* ---------- footer sa temama ---------- */
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1.3fr 1fr; gap: 48px; } }

/* ---------- tematske stranice (HTML sa servera) ---------- */
.seo-page { padding-bottom: 24px; }
.seo-page h1 { max-width: 20ch; }
.seo-page .lead { max-width: 60ch; }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--ink-3); margin-bottom: 20px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.seo-updated { margin: 20px 0 0; font-size: 14px; color: var(--ink-3); }
.seo-stats { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 760px) { .seo-stats { grid-template-columns: repeat(3, 1fr); } }
.seo-stats .kpi-value { font-size: clamp(30px, 4vw, 40px); }
.seo-page .section { margin-top: 64px; }
.seo-page .section > h2 { margin-bottom: 8px; }
.seo-page .section > p.muted { margin: 0 0 16px; }
.seo-page td small { font-weight: 500; }
.seo-page td a { color: var(--ink); font-weight: 600; text-decoration: none; }
.seo-page td a:hover { color: var(--primary); }
.seo-page .prose { max-width: 68ch; }
.seo-cta { margin-top: 32px; }
.seo-two { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .seo-two { grid-template-columns: 1fr 1fr; } }
.seo-two h2 { margin: 8px 0 12px; }
.seo-two ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.seo-two li + li { margin-top: 6px; }
.topic-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.topic-links a { border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; background: var(--bg); }
.topic-links a:hover { border-color: var(--ink-3); color: var(--ink); }
.faq { display: grid; gap: 8px; margin-top: 16px; }
.faq details { background: var(--surface); border-radius: var(--radius-md); padding: 18px 22px; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 700; color: var(--ink-3); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 12px 0 0; color: var(--ink-2); }
.seo-app { padding: 8px 0 40px; }
.seo-app .topic-links { margin-top: 24px; }

/* ---------- kalkulator plate ---------- */
.salary-calc { margin-top: 32px; display: grid; gap: 20px; }
.salary-calc .segmented { justify-self: start; background: var(--bg); }
.sc-inputs { display: flex; gap: 16px 24px; flex-wrap: wrap; align-items: flex-end; }
.sc-inputs label { display: grid; gap: 8px; }
.sc-inputs .money input { width: 180px; height: 56px; font-size: 24px; font-weight: 800; }
.sc-inputs select { height: 56px; border-radius: 14px; border: 0; background: var(--bg); padding: 0 14px; font: inherit; font-weight: 600; }
.sc-result { display: grid; gap: 4px; margin-bottom: 8px; }
.sc-result b { font-size: clamp(36px, 6vw, 52px); letter-spacing: -0.04em; line-height: 1.1; color: var(--primary); }
.sc-strong td { font-weight: 700; }
@media (max-width: 719px) {
  .salary-calc .segmented { width: 100%; }
  .salary-calc .segmented button { flex: 1; padding: 9px 8px; font-size: 13px; white-space: normal; }
  .sc-inputs { display: grid; }
  .sc-inputs .money, .sc-inputs .money input, .sc-inputs select { width: 100%; }
  .seo-page .section { margin-top: 48px; }
}
@media (max-width: 719px) {
  .seo-table table { font-size: 14px; }
  .seo-table th, .seo-table td { padding: 12px 6px; }
  .seo-table th:first-child, .seo-table td:first-child { padding-left: 0; white-space: normal; }
  .seo-table th:last-child, .seo-table td:last-child { padding-right: 0; }
  .seo-table td small { display: block; }
  .seo-table th { white-space: normal; vertical-align: bottom; }
}

/* ---------- oznaka ažuriranja, promjene ---------- */
.seo-updated { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.seo-updated .dot { width: 7px; height: 7px; border-radius: 50%; background: #2f9e44; box-shadow: 0 0 0 3px rgba(47,158,68,.15); }
.chg { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chg.up { background: var(--up-bg); color: var(--up); }
.chg.down { background: var(--down-bg); color: var(--down); }
.chg.flat { background: var(--surface); color: var(--ink-3); }

/* ---------- stranica namirnice (/cijena/...) ---------- */
.staple-hero { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 40px; align-items: center; margin-top: 32px;
  padding: 32px; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary-softer), var(--primary-soft)); }
.staple-hero-img { aspect-ratio: 1; border-radius: 24px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(10,77,162,.10); }
.staple-hero-img img { width: 78%; height: 78%; object-fit: contain; }
.staple-hero-body { display: grid; gap: 14px; justify-items: start; }
.staple-hero-body .seo-updated { background: rgba(255,255,255,.7); }
.staple-name { font-size: 18px; font-weight: 600; color: var(--ink-2); margin: 6px 0 0; letter-spacing: 0; }
.staple-price { font-size: clamp(48px, 7vw, 72px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--primary-ink); }
.staple-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.staple-meta .chg { font-size: 14px; padding: 5px 12px; }
.staple-hero .btn { margin-top: 8px; }
.staple-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 20px; }
.staple-link { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 18px; background: var(--surface);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; transition: background .15s, transform .15s; }
.staple-link:hover { background: var(--primary-softer); color: var(--primary-ink); transform: translateY(-1px); }
.staple-img { flex: none; width: 48px; height: 48px; border-radius: 12px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.staple-img img { width: 82%; height: 82%; object-fit: contain; }
.seo-table .chg { font-size: 13px; }
@media (max-width: 719px) {
  .staple-hero { grid-template-columns: 1fr; gap: 20px; padding: 16px; margin-top: 20px; }
  .staple-hero-img { aspect-ratio: 16 / 10; border-radius: 18px; }
  .staple-hero-img img { width: 60%; height: 80%; }
  .staple-hero-body { padding: 0 4px 8px; }
  .staple-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .staple-link { font-size: 13px; padding: 6px 10px 6px 6px; gap: 10px; }
  .staple-img { width: 40px; height: 40px; }
}

/* ---------- tematske stranice: boje, razmaci, pitanja, teme ---------- */
.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.seo-page .lead + .seo-updated, .seo-page h1 + .seo-updated { margin-top: 16px; }
.seo-page > .seo-updated { margin-top: 16px; }
.seo-stats { gap: 16px; margin-top: 32px; }
.seo-stats .kpi { padding: 28px 28px 30px; border: 1px solid transparent; }
.seo-stats .kpi:nth-child(1) { background: var(--primary); color: #fff; }
.seo-stats .kpi:nth-child(1) .label, .seo-stats .kpi:nth-child(1) .kpi-text { color: rgba(255,255,255,.78); }
.seo-stats .kpi:nth-child(2) { background: var(--primary-softer); border-color: var(--primary-soft); }
.seo-stats .kpi:nth-child(2) .kpi-value { color: var(--primary-ink); }
.seo-stats .kpi:nth-child(3) { background: #fff8e1; border-color: #ffecb3; }
.seo-stats .kpi:nth-child(3) .kpi-value { color: #5c4300; }
.seo-stats .kpi-value { margin: 14px 0 10px; }
.seo-stats .kpi-text { margin: 0; }
.seo-page .section { margin-top: 80px; }
.seo-page .section > h2 { margin: 0 0 10px; }
.seo-page .section > p.muted { margin: 0 0 20px; }
.seo-table { margin-top: 8px; }

/* pitanja */
.faq-wrap { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 40px; align-items: start; }
.faq-intro h2 { margin: 0 0 10px; }
.faq-intro { position: sticky; top: 100px; }
.faq { display: grid; gap: 10px; margin: 0; }
.faq details { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 0; transition: border-color .2s, box-shadow .2s, background .2s; }
.faq details:hover { border-color: rgba(10,77,162,.35); }
.faq details[open] { background: var(--primary-softer); border-color: var(--primary-soft); box-shadow: 0 6px 24px rgba(10,77,162,.08); }
.faq summary { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 700; font-size: 16px; }
.faq summary::after { content: none; }
.faq details[open] summary::after { content: none; }
.faq-n { flex: none; font-size: 13px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; width: 26px; }
.faq-q { flex: 1; line-height: 1.35; }
.faq-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--ink-2); transition: transform .25s, background .2s, color .2s; }
.faq-ic svg { width: 16px; height: 16px; }
.faq details[open] .faq-ic { transform: rotate(45deg); background: var(--primary); color: #fff; }
.faq-a { padding: 0 20px 20px 62px; color: var(--ink-2); line-height: 1.6; }
.faq-a p { margin: 0; }

/* povezane teme */
.topic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 20px; }
.topic-card { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: 15px;
  text-decoration: none; transition: transform .15s, background .15s; }
.topic-card:hover { transform: translateY(-2px); }
.tc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.tc-0 .tc-dot { background: var(--primary); } .tc-0:hover { background: var(--primary-softer); }
.tc-1 .tc-dot { background: #f2b600; } .tc-1:hover { background: #fff8e1; }
.tc-2 .tc-dot { background: #2f9e44; } .tc-2:hover { background: #e9f7ec; }
.tc-3 .tc-dot { background: #d6336c; } .tc-3:hover { background: #fdecf2; }

@media (max-width: 719px) {
  .seo-page .section { margin-top: 56px; }
  .faq-wrap { grid-template-columns: 1fr; gap: 16px; }
  .faq-intro { position: static; }
  .faq summary { padding: 16px; gap: 12px; font-size: 15px; }
  .faq-n { width: 22px; }
  .faq-a { padding: 0 16px 16px 50px; }
  .topic-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .topic-card { padding: 14px; font-size: 14px; }
  .seo-stats .kpi { padding: 22px; }
}

/* ---------- breadcrumb ---------- */
.crumbs { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; max-width: 100%; margin: 0 0 24px; padding: 4px; border-radius: 999px;
  background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.crumbs a.crumb-home { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s; }
.crumbs a.crumb-home:hover { background: #fff; color: var(--primary); }
.crumbs a.crumb-home svg { width: 16px; height: 16px; }
.crumb-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); opacity: .5; margin: 0 4px; }
.crumb-cur { padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--primary-ink); box-shadow: 0 1px 3px rgba(0,0,0,.06);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }

/* linkovi u tekstu tematskih stranica */
.seo-page .prose a, .seo-page p a:not(.btn) { color: var(--primary); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(10,77,162,.3);
  text-underline-offset: 3px; text-decoration-thickness: 2px; transition: text-decoration-color .15s; }
.seo-page .prose a:hover, .seo-page p a:not(.btn):hover { text-decoration-color: var(--primary); }

/* ---------- početna i ostale stranice: razmaci i akcenti boja ---------- */
.hero + .kpis, .kpis { margin-top: 24px; }
.panel { border: 1px solid rgba(14,15,12,.04); }
.section-head { margin-bottom: 24px; }
@media (max-width: 719px) { .hero + .kpis, .kpis { margin-top: 16px; } }

/* ---------- povezane teme: spisak sa ikonicom i opisom ---------- */
.related-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; margin-top: 20px; border-top: 1px solid var(--border); }
.related-item { display: flex; align-items: center; gap: 16px; padding: 16px 8px; border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none;
  border-radius: 0; transition: background .15s; }
.related-item:hover { background: var(--primary-softer); }
.related-item:hover .ri-title { color: var(--primary); }
.ri-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-softer); color: var(--primary); display: grid; place-items: center; transition: background .15s, color .15s; }
.related-item:hover .ri-icon { background: var(--primary); color: #fff; }
.ri-icon svg { width: 22px; height: 22px; }
.ri-text { display: grid; gap: 2px; min-width: 0; }
.ri-title { font-weight: 700; font-size: 15px; transition: color .15s; }
.ri-desc { font-size: 13.5px; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 719px) {
  .related-list { grid-template-columns: 1fr; }
  .related-item { padding: 14px 4px; gap: 14px; }
  .ri-icon { width: 40px; height: 40px; }
}

/* ---------- povezane teme: oznaka linka ---------- */
.ri-go { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--ink-3); transition: transform .15s, color .15s; }
.related-item:hover .ri-go { color: var(--primary); transform: translateX(3px); }

/* ---------- kalkulator plate ---------- */
.salary-calc { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 24px; align-items: start; margin-top: 32px; }
.sc-panel { display: grid; gap: 22px; padding: 28px; border-radius: var(--radius); background: var(--surface); position: sticky; top: 96px; }
.sc-field { display: grid; gap: 10px; }
.sc-label { font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; }
.sc-seg { display: flex; width: 100%; background: var(--bg); }
.sc-seg button { flex: 1; padding: 10px 8px; font-size: 13.5px; }
.sc-seg button[aria-pressed='true'] { background: var(--primary); color: #fff; box-shadow: none; }
.sc-money { display: flex; align-items: center; height: 68px; padding: 0 20px; border-radius: 18px; background: var(--bg); border: 2px solid transparent; transition: border-color .15s; }
.sc-money:focus-within { border-color: var(--primary); }
.sc-money input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); outline: none; }
.sc-money span { font-size: 24px; font-weight: 700; color: var(--ink-3); }
.sc-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; }
.sc-quick button { border: 1px solid var(--border); background: var(--bg); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.sc-quick button:hover { border-color: var(--primary); color: var(--primary); }
.sc-select { height: 52px; border-radius: 14px; border: 0; background: var(--bg); padding: 0 16px; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sc-select:focus { outline: 2px solid var(--primary); }
.sc-out { display: grid; gap: 16px; min-width: 0; }
.sc-cards { display: grid; gap: 16px; }
.sc-cards.two { grid-template-columns: 1fr 1fr; }
.sc-card { padding: 26px 28px; border-radius: var(--radius); background: var(--surface); display: grid; gap: 6px; align-content: start; }
.sc-card.em { background: linear-gradient(135deg, var(--primary), #1565c0); color: #fff; }
.sc-card.now { background: var(--surface); }
.sc-tag { justify-self: start; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--ink-2); margin-bottom: 8px; }
.sc-card.em .sc-tag { background: rgba(255,255,255,.18); color: #fff; }
.sc-card.now .sc-tag { background: var(--bg); }
.sc-big-label { font-size: 14px; font-weight: 600; opacity: .75; }
.sc-big { font-size: clamp(40px, 5vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; }
.sc-delta { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.sc-delta.good { background: #d3f9d8; color: #1d5e2b; }
.sc-delta.bad { background: #ffe3e3; color: #a8200d; }
.sc-mini { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(14,15,12,.1); font-size: 14px; }
.sc-card.em .sc-mini { border-top-color: rgba(255,255,255,.25); }
.sc-mini span { opacity: .75; }
.sc-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; line-height: 1.5; }
.sc-note .hi { flex: none; margin-top: 2px; }
.sc-table { border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; }
.sc-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sc-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; padding: 14px 18px; background: var(--surface); }
.sc-table td { padding: 13px 18px; border-top: 1px solid var(--border); }
.sc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-table .sc-strong td { font-weight: 800; background: var(--primary-softer); }

/* stope */
.rate-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 20px 0 16px; }
.rate { display: grid; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--surface); }
.rate b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--primary-ink); }
.rate span { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }

/* Euro model */
.em-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; }
.em-card { position: relative; padding: 28px; border-radius: var(--radius); background: var(--surface); }
.em-card:first-child { background: var(--primary-softer); }
.em-card h3 { margin: 0 0 14px; font-size: 19px; }
.em-card p { margin: 10px 0 0; color: var(--ink-2); line-height: 1.55; }
.em-k { position: absolute; top: 24px; right: 28px; font-size: 13px; font-weight: 800; color: var(--primary); opacity: .9; }
.em-big { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; color: var(--primary-ink); line-height: 1; }
.em-tiers { display: grid; gap: 10px; }
.em-tiers div { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; }
.em-tiers span { flex: 1; font-size: 14px; color: var(--ink-2); }
.em-tiers s { color: var(--ink-3); font-size: 14px; }
.em-tiers b { font-size: 20px; font-weight: 800; color: var(--primary-ink); }

@media (max-width: 899px) {
  .salary-calc { grid-template-columns: 1fr; }
  .sc-panel { position: static; }
}
@media (max-width: 719px) {
  .sc-panel { padding: 18px; gap: 18px; }
  .sc-seg button { font-size: 13px; padding: 9px 4px; }
  .sc-money { height: 60px; }
  .sc-money input { font-size: 28px; }
  .sc-cards.two { grid-template-columns: 1fr; gap: 10px; }
  .sc-card { padding: 20px; }
  .sc-table th, .sc-table td { padding: 11px 12px; font-size: 14px; }
  .em-cards { grid-template-columns: 1fr; }
  .em-card { padding: 22px; }
}
.salary-calc { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
.salary-calc > * , .sc-panel > * { min-width: 0; }
.salary-calc .segmented { justify-self: stretch; }
.sc-cards.two .sc-big { font-size: clamp(30px, 3.4vw, 44px); }
.sc-seg button { white-space: nowrap; }
@media (max-width: 899px) { .salary-calc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 719px) { .nav a[data-nav="metodologija"] { display: none; } }
.sc-money input { width: 0; }
.sc-note { background: var(--primary-softer); color: var(--primary-ink); }
.sc-note.warn { background: var(--warn-bg); color: var(--warn-ink); }
.sc-src { grid-column: 1; margin: -8px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; padding: 0 8px; }
.salary-calc .sc-out { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 899px) { .salary-calc .sc-out { grid-column: 1; grid-row: auto; } .sc-src { order: 3; } }
.salary-calc .sc-out { grid-row: auto; }
.sc-src { margin: 0; padding: 0; order: 0; }
.salary-calc .sc-money input { font-size: 32px; font-weight: 800; }
@media (max-width: 719px) { .salary-calc .sc-money input { font-size: 28px; } }

/* ---------- grafikoni na tematskim stranicama ---------- */
.seo-chart { margin: 20px 0 0; padding: 24px 24px 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--border); }
.seo-chart-box { position: relative; height: 300px; }
.seo-chart.tall .seo-chart-box { height: 380px; }
.seo-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.seo-legend span { display: inline-flex; align-items: center; gap: 8px; }
.seo-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.tbl-toggle { margin-top: 12px; }
.tbl-toggle > summary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--surface); cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 700; color: var(--ink-2); transition: background .15s, color .15s; }
.tbl-toggle > summary::-webkit-details-marker { display: none; }
.tbl-toggle > summary:hover { background: var(--primary-softer); color: var(--primary); }
.tbl-toggle > summary svg { width: 18px; height: 18px; }
.tbl-toggle .tt-close { display: none; }
.tbl-toggle[open] .tt-open { display: none; }
.tbl-toggle[open] .tt-close { display: inline; }
.tbl-toggle[open] > summary { background: var(--primary-softer); color: var(--primary); margin-bottom: 8px; }
@media (max-width: 719px) {
  .seo-chart { padding: 16px 12px 12px; margin-left: -4px; margin-right: -4px; }
  .seo-chart-box { height: 240px; }
  .seo-chart.tall .seo-chart-box { height: 300px; }
}
.sc-label em { font-style: normal; font-weight: 700; font-size: 11px; color: var(--primary); background: var(--primary-softer); padding: 2px 7px; border-radius: 999px; margin-left: 6px; text-transform: uppercase; letter-spacing: .04em; }
.salary-calc.need-edu .sc-edu-field .sc-select { outline: 2px solid var(--primary); outline-offset: 0; }
.sc-empty { display: flex; gap: 16px; align-items: flex-start; padding: 28px; border-radius: var(--radius); background: var(--primary-softer); border: 1px dashed rgba(10,77,162,.35); color: var(--primary-ink); }
.sc-empty .hi { flex: none; width: 28px; height: 28px; color: var(--primary); }
.sc-empty b { font-size: 18px; }
.sc-empty p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.55; }

/* ---------- prekidač Grafikon | Tabela ---------- */
.viz-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.viz-head h2 { margin: 0 0 10px; }
.viz-head p.muted { margin: 0; }
.viz-switch { flex: none; }
.viz-alt { margin-top: 20px; }
.viz-alt[hidden], .seo-chart[hidden] { display: none; }
@media (max-width: 719px) {
  .viz-head { align-items: stretch; }
  .viz-switch { width: 100%; }
  .viz-switch button { flex: 1; padding: 8px 6px; font-size: 13px; }
}

/* kalkulator plate: grupe stavki, stope i napomena */
.sc-table .sc-group td { padding: 10px 18px 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; background: var(--surface); }
.sc-table .sc-rate { display: inline-block; min-width: 46px; margin-right: 10px; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.sc-table .sc-foot { margin: 0; padding: 10px 18px 12px; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--border); }
@media (max-width: 600px) {
  .sc-seg button { padding: 10px 4px; font-size: 13px; }
  .sc-table td, .sc-table .sc-group td, .sc-table .sc-foot { padding-left: 12px; padding-right: 12px; }
  .sc-table .sc-rate { display: none; }
}

/* poređenje: jedan istaknut rezultat sa trakama Danas / 2027. */
.sc-hero { padding: 26px 28px; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), #1565c0); color: #fff; display: grid; gap: 18px; }
.sc-hero .sc-tag { background: rgba(255,255,255,.18); color: #fff; justify-self: start; }
.sc-hero-main { display: grid; gap: 6px; }
.sc-hero .sc-big { font-size: clamp(36px, 7vw, 48px); }
.sc-bars { display: grid; gap: 10px; }
.sc-bar { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 14px; }
.sc-bar i { height: 10px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.sc-bar b { display: block; height: 100%; border-radius: 99px; background: rgba(255,255,255,.55); }
.sc-bar.em b { background: #ffd43b; }
.sc-bar strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-hero-minis { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.sc-hero .sc-mini { border-top-color: rgba(255,255,255,.25); }
@media (max-width: 600px) { .sc-hero { padding: 22px 18px; } .sc-hero-minis { grid-template-columns: 1fr; } }

/* sažetak sa servera (vidljiv dok se aplikacija ne učita i čitačima bez JavaScripta) */
.seo-app h2 { font-size: 22px; margin: 32px 0 12px; }
.seo-facts { display: grid; gap: 0; margin: 20px 0 0; max-width: 640px; }
.seo-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.seo-facts dt { color: var(--ink-2); }
.seo-facts dd { margin: 0; font-weight: 700; text-align: right; }

/* kontrast teksta u hero kartici (WCAG AA 4,5:1 na svim nivoima boje) */
.hero .label { opacity: .88; }
.hero-line span { opacity: .9; }
.hero-line span small { opacity: 1; }
.hero-sub { opacity: .9; }

/* stabilan raspored dok se aplikacija učitava: footer ne ulazi u prvi ekran pa se ništa ne pomjera */
main#app[data-ssr='app'] { min-height: 100vh; }
.h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }

/* dijelovi daleko ispod prvog ekrana se iscrtavaju (i učitavaju sličice) tek kad im se korisnik približi */
.seo-page .related, .seo-page .faq-wrap, .staple-grid { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* izbor perioda iznad grafikona */
.chart-tools { display: flex; justify-content: flex-end; margin: 0 0 14px; }
.chart-tools[hidden] { display: none; }
.range-seg { background: var(--bg); }
.range-seg button { padding: 6px 12px; font-size: 13px; }
.range-seg button[aria-pressed='true'] { background: var(--ink); color: #fff; box-shadow: none; }
@media (max-width: 600px) {
  .chart-tools { justify-content: stretch; }
  .range-seg { display: flex; width: 100%; }
  .range-seg button { flex: 1; padding: 7px 4px; }
}
.viz-head > div:first-child { flex: 1 1 320px; min-width: 0; }

/* grafikoni: bijela kartica, red sa promjenom za period i izborom perioda */
.panel:has(> .chart-box) { background: #fff; border: 1px solid var(--border); }
.chart-tools { align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.chart-note { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.chart-note:empty { display: none; }
.chart-note-txt { font-size: 13px; color: var(--ink-3); }
.chart-tools:has(.chart-note:empty) { justify-content: flex-end; }
.range-seg { margin-left: auto; }
.seo-chart { box-shadow: 0 1px 2px rgba(14,15,12,.04); }
.seo-legend { justify-content: center; border-top: 0; padding-top: 6px; }
@media (max-width: 600px) {
  .chart-tools { flex-direction: column-reverse; align-items: stretch; }
  .chart-note { justify-content: flex-start; }
  .range-seg { margin-left: 0; }
}