@charset "UTF-8";

/* ==========================================================================
   Klimamont — javna stranica
   Ideja: uređaj hladi i grije, pa i stranica ima dvije temperature — plavu i
   crvenu na bijeloj plohi (klijentova želja, listopad 2026.). Plava je hlađenje:
   znak, mlazovi zraka, poveznice, odabir i fokus. Crvena (ember) je rezervirana
   za radnju — poziv, ponuda, rezervacija — i za cijenu. Ništa drugo nije
   crveno, pa oko uvijek zna gdje se klika.
   ========================================================================== */

/* ── pismo ───────────────────────────────────────────────────────────────
   Fira Sans, podskup latin + latin-ext (č ć ž š đ i m², provjereno). Jedno
   pismo u četiri debljine umjesto dva pisma — raspon debljina nosi hijerarhiju. */

@font-face {
    font-family: 'Fira Sans';
    src: url('/assets/fonts/fira-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Fira Sans';
    src: url('/assets/fonts/fira-medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Fira Sans';
    src: url('/assets/fonts/fira-bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Fira Sans';
    src: url('/assets/fonts/fira-black.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}

/* ── tokeni ─────────────────────────────────────────────────────────────── */

:root {
    --wall:        #F2F5F9;   /* ploha stranice — hladna bijela */
    --surface:     #FFFFFF;
    --surface-2:   #F7F9FC;
    --frost:       #DCE7F4;   /* hladna traka (hlađenje) */
    --frost-soft:  #EAF1F9;
    --ink:         #0F2240;   /* tamnoplava; 14,5:1 na plohi */
    --ink-2:       #485A72;   /* 6,4:1 na plohi */
    --ink-3:       #66778C;   /* samo velika/pomoćna tipografija */
    --line:        #D4DCE6;
    --line-strong: #B5C1CF;

    --blue:        #1F5FAE;   /* hlađenje: znak, poveznice, odabir — bijelo na njemu 6,4:1 */
    --blue-ink:    #174A8B;   /* ista boja kao tekst na svijetlom, 8,0:1 */
    --blue-lift:   #8DBBF0;   /* na tamnoj plohi, 7,9:1 */

    --ember:       #C41E2A;   /* radnja (grijanje) — bijelo na njemu 5,9:1 */
    --ember-ink:   #9C1520;   /* ista boja kao tekst na svijetlom, 7,6:1 */
    --ember-soft:  #FBE3E4;

    --ok:          #1F6B4A;
    --ok-soft:     #DDEDE4;
    --warn-soft:   #FBEFD6;
    --warn-ink:    #855610;
    --danger:      #A32318;
    --danger-soft: #F7E2E0;

    --r-sm: 3px;
    --r:    6px;
    --r-lg: 10px;

    --shadow-plate: 0 1px 2px rgba(15, 34, 64, .06), 0 6px 20px -12px rgba(15, 34, 64, .28);
    --shadow-lift:  0 2px 6px rgba(15, 34, 64, .08), 0 18px 40px -22px rgba(15, 34, 64, .45);

    --container: 71rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --section-y: clamp(3.25rem, 8vw, 6rem);

    --t: .18s cubic-bezier(.2, .6, .3, 1);
}

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

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

body {
    margin: 0;
    background: var(--wall);
    color: var(--ink);
    font-family: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.62;
    font-feature-settings: 'kern' 1;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

h1, h2, h3, h4 {
    margin: 0 0 .6em;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.022em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.35rem + 3.4vw, 3.9rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); letter-spacing: -.012em; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.005em; }

p { margin: 0 0 1.1em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--blue); }

/* Duga e-mail adresa nema gdje prelomiti redak i na uskom zaslonu razvuče
   cijelu stranicu u širinu. Lomi se samo ondje gdje je nužno. */
a[href^="mailto:"], .prose a, .specs dd, address { overflow-wrap: anywhere; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

strong, b { font-weight: 700; }
small { font-size: .875rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

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

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

.skip-link {
    position: absolute; left: .5rem; top: -4rem; z-index: 100;
    background: var(--ink); color: var(--wall);
    padding: .7rem 1.1rem; border-radius: var(--r); font-weight: 500;
    transition: top var(--t);
}
.skip-link:focus { top: .5rem; color: var(--wall); }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── raspored ───────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.section--frost { background: var(--frost-soft); }
.section--ink { background: var(--ink); color: var(--wall); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink p { color: #C3CFDD; }
.section--ink a { color: var(--blue-lift); }
.section--paper { background: var(--surface); }

.section__head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); max-width: 46rem; }
.section__head p { color: var(--ink-2); font-size: 1.075rem; }
.section--ink .section__head p { color: #C3CFDD; }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
/* Najviše dva stupca (auto-fit bi ih na širokom zaslonu složio tri). */
.grid--pairs { grid-template-columns: 1fr; }
@media (min-width: 44rem) { .grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stack > * + * { margin-top: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ── gumbi ──────────────────────────────────────────────────────────────── */

.btn {
    --btn-bg: var(--ember);
    --btn-fg: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.9rem;
    padding: .7rem 1.35rem;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 1px solid transparent; border-radius: var(--r);
    font: inherit; font-weight: 500; letter-spacing: -.005em;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.btn:hover { --btn-bg: var(--ember-ink); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; border-color: var(--ink); }

.btn--quiet { --btn-bg: var(--surface); --btn-fg: var(--ink); border-color: var(--line); }
.btn--quiet:hover { --btn-bg: var(--surface-2); --btn-fg: var(--ink); border-color: var(--line-strong); }

/* WhatsAppovo zeleno (#128C7E) daje 4,14:1 s bijelim tekstom i pada AA.
   Ovo je potamnjena inačica iste boje: 5,1:1, a i dalje se prepoznaje. */
.btn--wa { --btn-bg: #107C6F; }
.btn--wa:hover { --btn-bg: #0C625A; }

/* Gumb nosi vlastitu boju teksta i u tamnim odjeljcima i u podnožju.
   Bez ovoga pravila `.footer a` i `.section--ink a` (specifičnija od `.btn`)
   preboje slova u boju poveznice — narančasto na narančastom, 2,2:1. */
.footer a.btn,
.section--ink a.btn,
.action-bar a.btn { color: var(--btn-fg); }
.footer a.btn:hover,
.section--ink a.btn:hover { color: var(--btn-fg); text-decoration: none; }

.btn--lg { min-height: 3.25rem; padding: .85rem 1.75rem; font-size: 1.0625rem; font-weight: 700; }
.btn--sm { min-height: 2.35rem; padding: .4rem .85rem; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.link-arrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 500; text-decoration: none;
    border-bottom: 1px solid currentColor; padding-bottom: 1px;
    /* Bez ovoga se tekst lomi, a strelica ostane sama u drugom retku. */
    white-space: nowrap;
}
.link-arrow svg { flex: none; width: 1.05em; height: 1.05em; }
.link-arrow:hover { border-bottom-color: transparent; }

/* ── zaglavlje ──────────────────────────────────────────────────────────── */

.header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(242, 245, 249, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.header__bar { display: flex; align-items: center; gap: .6rem; min-height: 4.25rem; }
@media (min-width: 48rem) { .header__bar { gap: 1rem; } }

/* min-width: 0 dopušta znaku da se skupi. Bez toga naziv drži svoju punu
   širinu, gurne gumbe izvan zaslona i na mobitelu se pojavi vodoravno
   klizanje cijele stranice. */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); margin-right: auto; min-width: 0; }
.brand > span { min-width: 0; }
.brand__mark { width: 2.3rem; height: 2.3rem; flex: none; color: var(--ink); }
.brand__name { font-weight: 900; font-size: 1.2rem; letter-spacing: -.03em; line-height: 1; }

/* Znak je crtež u jednoj boji; jedino mlazovi zraka nose naglasnu boju, pa se
   na prvi pogled vidi što uređaj radi. */
.brand__mark .brand__air { stroke: var(--blue); }

/* Strujanje zraka u zaglavlju. Crta prođe kroz mlaz i izađe iz njega, pa se
   mlaz ponovno iscrta i ostane. Duljina 46 je duljina jednog mlaza.
   Jedan prolaz, ne beskonačno: pokret koji traje dulje od 5 s mora se moći
   zaustaviti (WCAG 2.2.2), a znak je na svakoj stranici. S najdužim kašnjenjem
   (1,05 s) sve završi za 3,85 s. `both` drži mlaz skrivenim dok čeka i
   iscrtanim nakon kraja. */
@keyframes km-strujanje {
    0%     { stroke-dashoffset: 46; }
    30%    { stroke-dashoffset: 0; }
    60%    { stroke-dashoffset: -46; }
    60.01% { stroke-dashoffset: 46; }
    100%   { stroke-dashoffset: 0; }
}
.brand__mark--zrak .brand__air path {
    stroke-dasharray: 46;
    animation: km-strujanje 2.8s linear 1 both;
}
.brand__mark--zrak .brand__air path:nth-child(2) { animation-delay: .35s; }
.brand__mark--zrak .brand__air path:nth-child(3) { animation-delay: .7s; }
.brand__mark--zrak .brand__air path:nth-child(4) { animation-delay: 1.05s; }

/* Bez animacije mlazovi moraju ostati potpuno iscrtani — inače bi znak ostao
   zamrznut u pola poteza. */
@media (prefers-reduced-motion: reduce) {
    .brand__mark--zrak .brand__air path { animation: none; stroke-dasharray: none; }
}

.nav { display: none; }
.nav__list { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
    display: block; padding: .5rem .55rem; border-radius: var(--r-sm);
    color: var(--ink); text-decoration: none; font-size: .9375rem; font-weight: 500;
    /* Nazivi stavki („Klima uređaji”, „O nama”) ne smiju se lomiti u dva reda —
       zaglavlje bi naraslo i skakalo pri promjeni širine prozora. */
    white-space: nowrap;
    transition: background-color var(--t), color var(--t);
}
.nav__link:hover { background: rgba(15, 34, 64, .07); color: var(--ink); }
.nav__link[aria-current] { color: var(--blue-ink); box-shadow: inset 0 -2px 0 var(--blue); border-radius: 0; }

.header__actions { display: flex; align-items: center; gap: .4rem; }
.header__phone { display: none; }

.burger {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 2.6rem; padding: .4rem .75rem;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
    color: var(--ink); font: inherit; font-weight: 500; font-size: .9375rem; cursor: pointer;
    flex: none; white-space: nowrap;
}
/* Na uskim zaslonima ostaje samo znak; naziv gumba čitačima zaslona i dalje
   stiže kroz aria-label. */
.burger__label { display: none; }
@media (min-width: 30rem) { .burger__label { display: inline; } }
.burger__box { display: grid; gap: 3px; width: 1.05rem; }
.burger__box span { height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--t), opacity var(--t); }
.burger[aria-expanded="true"] .burger__box span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav {
    display: none;
    border-top: 1px solid var(--line);
    background: var(--wall);
    padding-block: .75rem 1.25rem;
}
.mobile-nav[data-open] { display: block; }
.mobile-nav__list { list-style: none; margin: 0 0 1rem; padding: 0; }
.mobile-nav__list a {
    display: block; padding: .7rem .25rem; border-bottom: 1px solid var(--line);
    color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1.0625rem;
}
.mobile-nav__list a[aria-current] { color: var(--blue-ink); }

@media (min-width: 62rem) {
    .nav { display: block; }
    .burger { display: none; }
    .mobile-nav { display: none !important; }
}

/* Broj u zaglavlju se pojavljuje tek kad uz izbornik i gumb stane u jedan red.
   Na užim zaslonima do broja se dolazi trakom radnji na dnu. */
@media (min-width: 78rem) {
    .header__phone {
        display: inline-flex; align-items: center; gap: .45rem;
        font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1rem;
        white-space: nowrap;
    }
    .header__phone svg { width: 1.05rem; height: 1.05rem; color: var(--ember); }
}

/* ── mobilna traka radnji ───────────────────────────────────────────────── */

.action-bar {
    position: fixed; inset: auto 0 0 0; z-index: 45;
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--ink);
    padding-bottom: env(safe-area-inset-bottom);
}
.action-bar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    padding: .55rem .25rem .6rem;
    color: #fff; text-decoration: none; font-size: .8125rem; font-weight: 500;
    border-right: 1px solid rgba(255, 255, 255, .14);
}
.action-bar a:last-child { border-right: 0; }
.action-bar a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.action-bar svg { width: 1.15rem; height: 1.15rem; }
.action-bar .is-primary { background: var(--ember); }
.action-bar .is-primary:hover { background: var(--ember-ink); }

body { padding-bottom: 3.9rem; }

@media (min-width: 62rem) {
    .action-bar { display: none; }
    body { padding-bottom: 0; }
}

/* ── naslovni blok ──────────────────────────────────────────────────────── */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
.hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }

.hero h1 { margin-bottom: .5em; }
.hero__lead { font-size: clamp(1.075rem, 1rem + .4vw, 1.2rem); color: var(--ink-2); max-width: 34rem; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero__note { margin-top: 1.1rem; font-size: .9375rem; color: var(--ink-2); }

/* min-width: 0 je obavezan: bez njega stavka mreže poraste na urođenu širinu
   fotografije uređaja (919 px) i cijela se stranica na mobitelu pomiče
   vodoravno. Ista zamka kao kod znaka u zaglavlju. */
.hero__media { position: relative; min-width: 0; }
.hero__media img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
}

/* Pločica s cijenom preko fotografije — jedini „bogati” element na stranici. */
.hero__plate {
    position: absolute; left: clamp(-.5rem, -1vw, 0rem); bottom: -1.25rem;
    background: var(--surface); border: 1px solid var(--line);
    border-left: 4px solid var(--ember);
    border-radius: var(--r); padding: .85rem 1.1rem;
    box-shadow: var(--shadow-plate);
    max-width: 18rem;
}
/* Pločica visi ispod fotografije, pa joj treba mjesta — samo u zamjenskom
   prikazu bez vrtuljka, gdje pločica uopće postoji. */
@media (min-width: 56rem) {
    .hero__media:has(> .hero__plate) { margin-bottom: 1.25rem; }
}
.hero__plate dt { font-size: .8125rem; color: var(--ink-2); margin-bottom: .1rem; }
.hero__plate dd { margin: 0; font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; }
.hero__plate span { display: block; font-size: .8125rem; font-weight: 400; color: var(--ink-2); letter-spacing: 0; margin-top: .15rem; }

@media (min-width: 56rem) {
    .hero__grid { grid-template-columns: 1.05fr .95fr; }
}

/* ── vrtuljak uređaja u naslovnom bloku ──────────────────────────────────
   Traka je obično vodoravno klizno područje sa zaustavljanjem po jedinici
   (scroll-snap). Time radi i bez JavaScripta: prstom, kotačićem i tipkovnicom
   kroz poveznice u karticama. JavaScript samo dodaje sam prijelaz i gumb za
   zaustavljanje. */

.hero__track {
    display: flex; margin: 0; padding: 0; list-style: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
    background: var(--surface);
    /* Klizač bi presjekao donji rub kartice; kretanje je ionako vidljivo iz
       točkica ispod trake. */
    scrollbar-width: none;
}
.hero__track::-webkit-scrollbar { display: none; }

.hero__slide {
    flex: 0 0 100%; min-width: 0;
    scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; flex-direction: column;
}
/* Fotografije uređaja dolaze u različitim omjerima (od kvadratnih prikaza do
   širokih izreza iz oglasa), pa se uklapaju u isti okvir kao u katalogu —
   `contain` na svijetloj plohi, nikad izrez koji odsiječe uređaj. */
.hero__slide img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
    /* Bijela, a ne siva ploha kao u katalogu: fotografije uređaja dolaze s
       ugrađenom bijelom pozadinom, pa bi se na sivoj vidio rub slike. */
    padding: 1rem; background: var(--surface); border-bottom: 1px solid var(--line);
}

.hero__card {
    flex: 1; padding: .85rem 1.1rem 1rem;
    border-left: 4px solid var(--ember); border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: var(--surface);
}
.hero__card-brand { font-size: .8125rem; font-weight: 500; color: var(--ink-2); }
.hero__card-name { margin: .1rem 0 .35rem; font-size: 1.1rem; font-weight: 700; letter-spacing: -.015em; }
.hero__card-name a { color: inherit; text-decoration: none; }
.hero__card-name a:hover { color: var(--blue-ink); text-decoration: underline; }
.hero__card-spec { margin: 0 0 .45rem; font-size: .875rem; color: var(--ink-2); }
.hero__card-price { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.hero__card-price strong { font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }
.hero__card-price span { display: block; font-size: .8125rem; margin-top: .1rem; }

.hero__nav { display: flex; align-items: center; gap: .35rem; margin-top: .85rem; }
.hero__dots { display: flex; gap: .15rem; margin: 0; padding: 0; list-style: none; }

/* Točkica je vidljiva 10 px, ali je meta klika 24 px visoka i široka — manje
   od toga je na dodirnom zaslonu promašaj (WCAG 2.5.8). */
.hero__dot {
    display: grid; place-items: center;
    width: 1.6rem; height: 1.6rem;
    border-radius: 50%;
}
.hero__dot span {
    width: .625rem; height: .625rem; border-radius: 50%;
    background: var(--line-strong); transition: background-color var(--t), transform var(--t);
}
.hero__dot:hover span { background: var(--ink-3); }
.hero__dot[aria-current] span { background: var(--blue); transform: scale(1.15); }

/* Gumb za zaustavljanje izmjene dodaje skripta — bez nje se ništa ne miče samo
   od sebe, pa gumb ne bi imao što zaustaviti. */
.hero__pause {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; padding: 0;
    background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    color: var(--ink-2); cursor: pointer;
}
.hero__pause:hover { background: var(--surface); color: var(--ink); }
.hero__pause svg { width: .9rem; height: .9rem; }

@media (min-width: 56rem) {
    .hero__slide img { aspect-ratio: 5 / 4; }
}

/* Traka „što je uključeno” ispod naslovnog bloka. */
.included {
    display: grid; gap: 1px;
    background: var(--line); border: 1px solid var(--line);
    border-radius: var(--r); overflow: hidden;
}
.included__item { background: var(--surface); padding: 1rem 1.15rem; }
.included__item strong { display: block; font-size: .9375rem; }
.included__item span { display: block; font-size: .875rem; color: var(--ink-2); margin-top: .15rem; }

/* ── brojčanik obavljenih poslova ────────────────────────────────────────
   Broj je običan tekst. Skripta ga pretvara u stupce znamenki koji se zavrte
   kad traka uđe u prikaz; bez skripte ili uz smanjeno kretanje ostaje tekst. */
.poslovi { background: var(--ink); color: #fff; padding-block: clamp(2.25rem, 6vw, 3.75rem); }
.poslovi__wrap {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.25rem clamp(1.5rem, 5vw, 4rem);
}
.poslovi__tekst { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .9rem; margin: 0; }
.poslovi__uvod, .poslovi__opis { font-size: clamp(1.125rem, 2.6vw, 1.5rem); font-weight: 500; color: #C3CFDD; }
.poslovi__opis { color: #fff; }
.poslovi__broj {
    position: relative; display: inline-flex; padding-bottom: .12em;
    font-size: clamp(3.75rem, 15vw, 7rem); font-weight: 900; line-height: 1; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
/* mlaz zraka ispod broja — isti plavi kao u znaku */
.poslovi__broj::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: .06em; border-radius: 1em;
    background: var(--blue-lift);
}
.poslovi__napomena { flex: 1 1 16rem; max-width: 26rem; margin: 0; color: #C3CFDD; }

.poslovi__stupac { display: inline-block; height: 1em; overflow: hidden; }
.poslovi__traka {
    display: block; transition: transform 1.9s cubic-bezier(.16, .84, .24, 1);
    transition-delay: calc(var(--i) * 140ms); will-change: transform;
}
.poslovi__traka span { display: block; height: 1em; }
.poslovi__broj[data-brojcanik="ceka"]::after { transform: scaleX(0); }
.poslovi__broj[data-brojcanik]::after { transform-origin: left; transition: transform 1.6s cubic-bezier(.16, .84, .24, 1) .5s; }
.poslovi__broj[data-brojcanik="vrti"] .poslovi__traka { transform: translateY(var(--do)); }
@media (min-width: 44rem) { .included { grid-template-columns: repeat(3, 1fr); } }

/* ── kartice ────────────────────────────────────────────────────────────── */

.card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden;
}
.card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.card__body > *:last-child { margin-top: auto; }

/* Kartica uređaja: podatkovna pločica kakva stoji na samom uređaju. */
.plate { position: relative; transition: border-color var(--t), box-shadow var(--t); }
.plate:hover { border-color: var(--line-strong); box-shadow: var(--shadow-plate); }
.plate__media { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.plate__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: .75rem; }
.plate__brand { font-size: .8125rem; font-weight: 500; color: var(--ink-2); }
.plate__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; margin: .1rem 0 .65rem; }
.plate__title a { color: inherit; text-decoration: none; }
.plate__title a::after { content: ""; position: absolute; inset: 0; }
.plate__title a:hover { color: var(--blue-ink); }

.plate__specs {
    display: flex; flex-wrap: wrap; gap: .3rem;
    margin: 0 0 .9rem; padding: 0; list-style: none;
}
.plate__specs li {
    margin: 0; padding: .2rem .5rem;
    background: var(--frost-soft); border-radius: var(--r-sm);
    font-size: .8125rem; font-weight: 500; color: var(--ink);
}

.plate__price { border-top: 1px solid var(--line); padding-top: .85rem; }
.price { font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.price__from { font-size: .8125rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.price__note { display: block; font-size: .8125rem; color: var(--ink-2); margin-top: .15rem; }
.price--pending { font-size: 1.0625rem; font-weight: 700; color: var(--ink-2); letter-spacing: -.01em; }
/* --ink-2, ne --ink-3: precrtana cijena je obavezan podatak (najniža cijena u
   30 dana) u 15 px, a --ink-3 na plohi stranice ima samo 4,19:1 (WCAG 1.4.3). */
.price__old { font-size: .9375rem; font-weight: 500; color: var(--ink-2); text-decoration: line-through; margin-left: .4rem; }

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .5rem; border-radius: 100px;
    font-size: .75rem; font-weight: 700; letter-spacing: .01em;
}
.badge--ember { background: var(--ember-soft); color: var(--ember-ink); }
.badge--frost { background: var(--frost); color: var(--ink); }
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--warn { background: var(--warn-soft); color: var(--warn-ink); }
/* 4. 10. 2026.: boje zamijenjene na zahtjev operatera. Akcija je žuta, a preporuka za
   grijanje jedina puna crvena oznaka (bijelo na --ember 5,9:1). */
.badge--sale { background: var(--warn-soft); color: var(--warn-ink); }
.badge--heat { background: var(--ember); color: #fff; }
.price__cut { font-size: .8125rem; font-weight: 800; color: var(--ember-ink); margin-left: .35rem; white-space: nowrap; }
.sale-period { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; }
.plate__flags {
    position: absolute; top: .65rem; left: .65rem; right: .65rem; z-index: 1;
    display: flex; flex-wrap: wrap; gap: .35rem;
}
.badge svg { width: 1em; height: 1em; margin-right: .3em; vertical-align: -.12em; }

/* Kartica usluge */
.service { position: relative; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.service__icon { width: 2.25rem; height: 2.25rem; color: var(--blue); margin-bottom: .9rem; }
.service h3 { margin-bottom: .4rem; }
.service h3 a { color: inherit; text-decoration: none; }
.service h3 a::after { content: ""; position: absolute; inset: 0; }
.service h3 a:hover { color: var(--blue-ink); }
.service p { font-size: .96875rem; color: var(--ink-2); }
.service__price { display: block; margin-top: .8rem; font-weight: 700; font-size: .9375rem; }

/* ── postupak (stvarni slijed, zato numeriran) ──────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1.5rem; }
.steps li { position: relative; counter-increment: step; padding-left: 3.25rem; }
.steps li::before {
    content: counter(step);
    position: absolute; left: 0; top: -.1rem;
    width: 2.35rem; height: 2.35rem; display: grid; place-items: center;
    background: var(--ink); color: #fff; border-radius: 50%;
    font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.section--ink .steps li::before { background: var(--ember); }
.steps h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: .25rem; letter-spacing: -.01em; }
.steps p { font-size: .96875rem; color: var(--ink-2); }
.section--ink .steps p { color: #C3CFDD; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2.5rem; } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ── paketi i cjenik ────────────────────────────────────────────────────── */

.package { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; }
.package--highlight { border-color: var(--ember); box-shadow: var(--shadow-plate); }
.package__name { font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; margin-bottom: .2rem; }
.package__subtitle { font-size: .9375rem; color: var(--ink-2); margin-bottom: 1rem; }
.package__price { font-size: 2rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.package__price small { display: block; font-size: .8125rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-top: .3rem; }
.package__list { list-style: none; margin: 1.25rem 0; padding: 0; }
.package__list li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; font-size: .96875rem; }
.package__list li::before {
    content: ""; position: absolute; left: 0; top: .5em;
    width: .7rem; height: .35rem; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
    transform: rotate(-45deg);
}
.package__list--minus li::before { border-left: 0; border-bottom: 2px solid var(--ink-3); transform: none; top: .75em; width: .75rem; }
.package__foot { margin-top: auto; padding-top: 1rem; }

/* ── galerija ───────────────────────────────────────────────────────────── */

.gallery { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.gallery figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.gallery figcaption { padding: .7rem .85rem; font-size: .875rem; color: var(--ink-2); }
.gallery figcaption strong { display: block; color: var(--ink); font-size: .9375rem; }

/* ── recenzije ──────────────────────────────────────────────────────────── */

.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.35rem; }
.review blockquote { margin: 0 0 1rem; font-size: 1.0625rem; }
.review figcaption { font-size: .9375rem; color: var(--ink-2); }
.review figcaption strong { color: var(--ink); }
.stars { display: inline-flex; gap: .1rem; margin-bottom: .6rem; color: var(--ember); }
.stars svg { width: 1rem; height: 1rem; }

/* ── obrasci ────────────────────────────────────────────────────────────── */

.form { max-width: 40rem; }
.form__row { margin-bottom: 1.15rem; }
.form__row--split { display: grid; gap: 1.15rem; }
@media (min-width: 34rem) { .form__row--split { grid-template-columns: 1fr 1fr; } }

label { display: block; font-weight: 500; font-size: .9375rem; margin-bottom: .3rem; }
.label-note { font-weight: 400; color: var(--ink-2); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], input[type="password"], input[type="search"], select, textarea {
    width: 100%;
    min-height: 2.9rem;
    padding: .6rem .8rem;
    background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--r);
    color: var(--ink); font: inherit; font-size: 1rem;
    transition: border-color var(--t), box-shadow var(--t);
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234A5754' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .8rem center; background-size: .7rem;
    padding-right: 2.2rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 95, 174, .18); outline: none; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }

.field-error { display: block; margin-top: .35rem; font-size: .875rem; font-weight: 500; color: var(--danger); }
[aria-invalid="true"] { border-color: var(--danger); }
[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(163, 35, 24, .15); }

.field-help { display: block; margin-top: .3rem; font-size: .875rem; color: var(--ink-2); }

.check { display: grid; grid-template-columns: 1.15rem 1fr; gap: .65rem; align-items: start; font-weight: 400; font-size: .9375rem; }
.check input { width: 1.15rem; height: 1.15rem; margin: .22rem 0 0; accent-color: var(--blue); }

.notice { padding: .95rem 1.1rem; border-radius: var(--r); border: 1px solid; margin-bottom: 1.5rem; font-size: .96875rem; }
.notice p { max-width: none; }
.notice--error { background: var(--danger-soft); border-color: #E7B7B2; color: #6E1810; }
.notice--ok { background: var(--ok-soft); border-color: #B4D6C5; color: #14513A; }
.notice--info { background: var(--frost-soft); border-color: #B9CDE4; color: var(--ink); }
.notice--warn { background: var(--warn-soft); border-color: #EAD4A6; color: var(--warn-ink); }
.notice strong { font-weight: 700; }

/* ── rezervacija ────────────────────────────────────────────────────────── */

.stepper { display: flex; gap: .5rem; list-style: none; margin: 0 0 2rem; padding: 0; flex-wrap: wrap; }
/* Koraci koji tek slijede i dalje moraju biti čitljivi: --ink-3 daje 4,2:1 i
   pada AA, pa se koristi --ink-2 (6,4:1). */
.stepper li { display: flex; align-items: center; gap: .45rem; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.stepper li + li::before { content: ""; width: 1.25rem; height: 1px; background: var(--line-strong); }
.stepper span {
    display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
    border: 1px solid var(--line-strong); border-radius: 50%;
    font-size: .8125rem; font-variant-numeric: tabular-nums;
}
.stepper .is-active { color: var(--ink); }
.stepper .is-active span { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.stepper .is-done { color: var(--ink-2); }
.stepper .is-done span { background: var(--ink); border-color: var(--ink); color: #fff; }

.choice-list { display: grid; gap: .75rem; margin-bottom: 1.75rem; }
.choice {
    display: grid; grid-template-columns: 1.15rem 1fr; gap: .85rem; align-items: start;
    padding: 1rem 1.15rem; background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--r);
    cursor: pointer; font-weight: 400;
    transition: border-color var(--t), background-color var(--t);
}
.choice:hover { border-color: var(--ink-3); }
.choice input { width: 1.15rem; height: 1.15rem; margin: .3rem 0 0; accent-color: var(--blue); }
.choice:has(input:checked) { border-color: var(--blue); background: #F2F7FD; box-shadow: inset 0 0 0 1px var(--blue); }
.choice:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.choice__title { display: block; font-weight: 700; font-size: 1.0625rem; }
.choice__meta { display: block; font-size: .875rem; color: var(--ink-2); margin-top: .1rem; }
.choice__desc { display: block; font-size: .9375rem; color: var(--ink-2); margin-top: .35rem; }

.calendar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .6rem; }
@media (min-width: 26rem) { .calendar { padding: 1rem; } }
.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .85rem; }
.calendar__month { font-weight: 700; font-size: 1.0625rem; }
.calendar__nav { display: flex; gap: .35rem; }
.calendar__nav button {
    width: 2.35rem; height: 2.35rem; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
    color: var(--ink); cursor: pointer;
}
.calendar__nav button:hover:not([disabled]) { background: var(--surface-2); }
.calendar__nav button[disabled] { opacity: .35; cursor: not-allowed; }
.calendar__nav svg { width: 1rem; height: 1rem; }

.calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; }
@media (min-width: 26rem) { .calendar__grid { gap: .3rem; } }
.calendar__dow { text-align: center; font-size: .75rem; font-weight: 500; color: var(--ink-2); padding-bottom: .3rem; }
.day {
    position: relative; aspect-ratio: 1; min-height: 2.2rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-sm);
    color: var(--ink); font: inherit; font-size: .9375rem; font-variant-numeric: tabular-nums; cursor: pointer;
    transition: background-color var(--t), border-color var(--t);
}
.day:hover:not([disabled]) { background: var(--frost); }
.day[disabled] { color: var(--ink-3); background: transparent; cursor: not-allowed; }
.day__dot { width: .3rem; height: .3rem; border-radius: 50%; background: var(--blue); }
.day[disabled] .day__dot { display: none; }
.day[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.day[aria-pressed="true"] .day__dot { background: var(--blue-lift); }
.day--today:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--line-strong); }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: .5rem; margin-top: 1.25rem; }
.slot {
    min-height: 2.9rem; padding: .5rem;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
    color: var(--ink); font: inherit; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer;
    transition: border-color var(--t), background-color var(--t), color var(--t);
}
.slot:hover { border-color: var(--blue); color: var(--blue-ink); }
.slot[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }

.slots-state { margin-top: 1.25rem; }
.skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: .5rem; }
.skeleton span {
    height: 2.9rem; border-radius: var(--r);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--frost-soft) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.summary {
    background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--blue);
    border-radius: var(--r); padding: 1.15rem 1.35rem; margin-bottom: 1.75rem;
}
.summary dl { display: grid; gap: .55rem; margin: 0; }
.summary dt { font-size: .8125rem; color: var(--ink-2); }
.summary dd { margin: 0; font-weight: 700; }
@media (min-width: 34rem) { .summary dl { grid-template-columns: repeat(2, 1fr); } }

/* ── stranica uređaja ───────────────────────────────────────────────────── */

.breadcrumbs { font-size: .875rem; color: var(--ink-2); margin-bottom: 1.25rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-2); }

.product { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 56rem) { .product { grid-template-columns: 1.05fr .95fr; } }

.product__gallery { display: grid; gap: .6rem; }
.product__main { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.product__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface); padding: 1rem; }
.product__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .5rem; }
.product__thumbs button { padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; overflow: hidden; }
.product__thumbs img { aspect-ratio: 1; object-fit: contain; padding: .25rem; }
.product__thumbs button[aria-pressed="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }

.variants { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .96875rem; }
.variants caption { text-align: left; font-weight: 700; padding-bottom: .5rem; }
.variants th, .variants td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); }
.variants th { font-size: .8125rem; font-weight: 500; color: var(--ink-2); }
.variants td:last-child, .variants th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.variants tr:last-child td { border-bottom: 0; }
.variants td strong { font-weight: 700; }
.table-scroll { overflow-x: auto; }

.specs { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
/* Do 30rem naziv i vrijednost idu jedno ispod drugoga — dvostupčani raspored
   bi na 320 px razvukao stranicu. */
.specs div { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 30rem) {
    .specs div { grid-template-columns: minmax(9rem, 1fr) 1.2fr; gap: 1rem; }
}
.specs dt { color: var(--ink-2); font-size: .9375rem; }
.specs dd { margin: 0; font-weight: 500; }

.sticky-cta { position: sticky; top: 5.5rem; }

/* ── podaci o obrtu ─────────────────────────────────────────────────────── */

/* Popis je dvostupčan tek kad ima mjesta: naziv „Registarsko tijelo” i njegova
   vrijednost u jednom redu na mobitelu ostave po tri znaka po retku. */
.company { margin: 0; font-size: .875rem; }
.company dt { color: var(--ink-2); }
.company dd { margin: 0 0 .7rem; color: var(--ink); }
.company dd:last-child { margin-bottom: 0; }
.company .iban { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

@media (min-width: 30rem) {
    .company { display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; }
    .company dt { grid-column: 1; }
    .company dd { grid-column: 2; margin-bottom: .25rem; }
}

.prose .company { margin-block: 1.25rem 2rem; }

/* ── podnožje ───────────────────────────────────────────────────────────── */

.footer { background: var(--ink); color: #C3CFDD; padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; }
.footer a { color: #C3CFDD; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
/* Naslovi stupaca u podnožju su h2 (iza h1 stranice), pa red naslova ostaje
   ispravan i na stranicama koje nemaju nijedan h2 u sadržaju. Veličina je
   svejedno mala — razina naslova je za čitače zaslona, ne za oko. */
.footer h2 { color: #fff; font-size: .9375rem; font-weight: 700; letter-spacing: .01em; margin-bottom: .8rem; }
.footer__grid { display: grid; gap: 2rem; }
@media (min-width: 44rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand { display: flex; align-items: center; gap: .6rem; color: #fff; margin-bottom: .9rem; }
.footer__brand .brand__name { color: #fff; }
/* .brand__mark boji jedinicu u --ink, a to je i boja podnožja: znak je nestao. */
.footer__brand .brand__mark { color: #fff; }
/* Plava mlazova na tamnoplavoj podlozi nestaje (2,6:1) — u podnožju svjetlija. */
.footer__brand .brand__air { stroke: var(--blue-lift); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .45rem; font-size: .9375rem; }
.footer__bottom {
    margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
    font-size: .875rem; color: #93A3B8;
}
.footer__bottom a { color: #93A3B8; }
/* Široko: autorstvo točno u sredini, pravne poveznice uz desni rub (1fr auto 1fr
   drži sredinu i kad su lijevi i desni stupac različito široki). */
@media (min-width: 56rem) {
    .footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; }
    .footer__legal { justify-self: end; text-align: right; }
}

/* ── pomoćno ────────────────────────────────────────────────────────────── */

.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.lead { font-size: 1.125rem; color: var(--ink-2); }

.empty {
    padding: 2rem 1.5rem; text-align: center;
    background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r);
    color: var(--ink-2);
}
.empty strong { display: block; color: var(--ink); font-size: 1.0625rem; margin-bottom: .35rem; }

.prose > h2 { margin-top: 2.25rem; }
.prose > h3 { margin-top: 1.75rem; }
.prose ul { max-width: 66ch; }

.area-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.area-list li {
    padding: .35rem .75rem; background: var(--surface); border: 1px solid var(--line);
    border-radius: 100px; font-size: .9375rem; font-weight: 500;
}
.section--ink .area-list li { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #fff; }

/* Filtri kataloga */
.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; margin-bottom: 1.75rem; }
.filters__grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.filters__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .85rem; }
.filters label { font-size: .8125rem; color: var(--ink-2); }
.filters__checks { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: .85rem; }
.filters .filters__check { display: flex; gap: .5rem; align-items: center; font-size: .9375rem; color: var(--ink); }
.filters__check input { width: 1.1rem; height: 1.1rem; accent-color: var(--blue); }
.result-count { font-size: .9375rem; color: var(--ink-2); margin-bottom: 1rem; }

/* Kolačići */
.cookie {
    position: fixed; left: 1rem; right: 1rem; bottom: 4.75rem; z-index: 50;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift); padding: 1.15rem 1.25rem; max-width: 32rem;
    font-size: .9375rem;
}
@media (min-width: 62rem) { .cookie { bottom: 1.25rem; left: 1.25rem; right: auto; } }
.cookie p { max-width: none; margin-bottom: .85rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .skeleton span { animation: none; background: var(--surface-2); }
}

@media print {
    .header, .action-bar, .footer, .cookie, .btn { display: none !important; }
    body { background: #fff; padding: 0; }
}

/* ── poziv izvan radnog vremena ───────────────────────────────────────── */
.call-off {
    width: min(26rem, calc(100% - 2rem));
    padding: 1.5rem;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lift);
}
.call-off::backdrop { background: rgba(15, 34, 64, .55); }
.call-off h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.call-off form { margin-bottom: 0; }