/* =============================================================================
   TERMO KLIMA — dizajn sistem 2026
   Jedan fajl nosi tokene, tipografiju, mrežu i komponente novog frontenda.
   Ucitava se POSLIJE stare teme i namjerno je nadjacava.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENI */
:root {
    /* podloge */
    --tk-bg:            #ffffff;
    --tk-surface:       #f3f6f8;
    --tk-surface-2:     #e8eef2;
    --tk-ink-bg:        #0e1519;   /* tamni blok */

    /* tekst */
    --tk-ink:           #0e1519;
    --tk-ink-2:         #4e5f6a;
    --tk-ink-3:         #7c8d97;
    --tk-on-dark:       #ffffff;
    --tk-on-dark-2:     #a8b8c2;

    /* brend */
    --tk-blue:          #0079b8;   /* nosivo plavo, dovoljan kontrast na bijelom */
    --tk-blue-dark:     #005c8d;
    --tk-blue-bright:   #009de0;   /* postojeca brend boja, za sitne akcente */
    --tk-blue-soft:     #e6f2f9;

    /* grijanje — topli akcent, koristi se stedljivo */
    --tk-heat:          #d1490f;
    --tk-heat-soft:     #fdeee6;

    /* linije */
    --tk-line:          #dde5ea;
    --tk-line-2:        #eef2f5;

    /* mjere */
    --tk-container:     1280px;
    --tk-gap:           24px;
    --tk-radius:        4px;
    --tk-header-h:      76px;

    --tk-shadow:        0 1px 2px rgba(14, 21, 25, .05), 0 8px 24px rgba(14, 21, 25, .06);
    --tk-shadow-lg:     0 2px 4px rgba(14, 21, 25, .06), 0 18px 48px rgba(14, 21, 25, .12);

    --tk-font: "Archivo", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --------------------------------------------------------------- 2. RESET */
.tk *,
.tk *::before,
.tk *::after { box-sizing: border-box; }

/* Zatvorena mobilna ladica stoji van desne ivice (translateX(100%)) i, dok je
   samo body imao overflow-x:hidden, sirila je prostor za scroll na uskim ekranima.
   PAZNJA: mora ostati `clip`, a NE `hidden`. `hidden` od elementa pravi kontejner
   za skrolovanje, pa `position: sticky` na zaglavlju prestaje da radi — zaglavlje
   se tada lijepi za taj kontejner, koji i sam odlazi gore. `clip` sprjecava
   vodoravni skrol bez tog nuspojava. */
html { overflow-x: clip; }

body.tk {
    margin: 0;
    background: var(--tk-bg);
    color: var(--tk-ink);
    font-family: var(--tk-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;   /* isti razlog kao gore — `hidden` bi ubio sticky zaglavlje */
}

.tk img { max-width: 100%; height: auto; display: block; }
.tk a { color: inherit; text-decoration: none; }
.tk button { font: inherit; color: inherit; }
.tk ul, .tk ol { margin: 0; padding: 0; list-style: none; }

.tk :focus-visible {
    outline: 3px solid var(--tk-blue-bright);
    outline-offset: 2px;
}

/* ---------------------------------------------------------- 3. TIPOGRAFIJA */
.tk h1, .tk h2, .tk h3, .tk h4, .tk h5 {
    margin: 0;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.022em;
    text-wrap: balance;
    color: var(--tk-ink);
}

.tk h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); }
.tk h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
.tk h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.015em; }
.tk h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

.tk p { margin: 0 0 1rem; }
.tk p:last-child { margin-bottom: 0; }

.tk-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tk-blue);
    margin-bottom: 14px;
}
.tk-eyebrow--heat { color: var(--tk-heat); }
.tk-eyebrow--light { color: var(--tk-blue-bright); }

.tk-lead {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    line-height: 1.6;
    color: var(--tk-ink-2);
    max-width: 60ch;
}

/* ---------------------------------------------------------------- 4. MREZA */
.tk-container {
    width: 100%;
    max-width: var(--tk-container);
    margin: 0 auto;
    padding: 0 20px;
}

.tk-section { padding: clamp(48px, 7vw, 88px) 0; }
.tk-section--tight { padding: clamp(36px, 5vw, 60px) 0; }
.tk-section--surface { background: var(--tk-surface); }
.tk-section--ink { background: var(--tk-ink-bg); color: var(--tk-on-dark); }
.tk-section--ink h2,
.tk-section--ink h3 { color: var(--tk-on-dark); }
.tk-section--ink .tk-lead { color: var(--tk-on-dark-2); }

.tk-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: clamp(28px, 4vw, 44px);
}
.tk-sec-head > div { max-width: 62ch; }
/* Naslov sekcije bez mjere od 62ch. Za duze naslove koje vlasnik izricito
   trazi u jednom redu (npr. promo video na Uslugama i Proizvodnji, 09.09.2026).
   Na uzim ekranima se svejedno prelama — tu fizicki nema mjesta. */
.tk-sec-head--wide > div { max-width: none; }

/* --------------------------------------------------------------- 5. DUGMAD */
.tk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: var(--tk-radius);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.tk-btn:active { transform: translateY(1px); }

.tk .tk-btn--primary { background: var(--tk-blue); color: #fff; }
.tk .tk-btn--primary:hover { background: var(--tk-blue-dark); color: #fff; }

.tk .tk-btn--ghost { background: transparent; color: var(--tk-ink); border-color: var(--tk-line); }
.tk .tk-btn--ghost:hover { border-color: var(--tk-ink); }

.tk .tk-btn--on-dark { background: #fff; color: var(--tk-ink); }
.tk .tk-btn--on-dark:hover { background: var(--tk-blue-bright); color: #fff; }

.tk .tk-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.tk .tk-btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }

.tk .tk-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    color: var(--tk-blue);
    min-height: 32px;
}
.tk .tk-link:hover { color: var(--tk-blue-dark); }
.tk-link svg { transition: transform .18s ease; }
.tk-link:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------- 6. HEADER */
.tk-topbar {
    background: var(--tk-ink-bg);
    color: var(--tk-on-dark-2);
    font-size: 13.5px;
}
.tk-topbar .tk-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
}
.tk .tk-topbar a { color: var(--tk-on-dark-2); display: inline-flex; align-items: center; gap: 7px; }
.tk .tk-topbar a:hover { color: #fff; }
.tk-topbar-left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tk-topbar-right { display: flex; align-items: center; gap: 16px; }
.tk-topbar strong { color: #fff; font-weight: 600; }

.tk-lang { display: flex; align-items: center; gap: 4px; }
.tk-lang a {
    padding: 4px 8px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .04em;
    min-height: 28px;
}
.tk .tk-lang a.is-active { background: rgba(255,255,255,.14); color: #fff; }

.tk-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: #fff;
    border-bottom: 1px solid var(--tk-line);
}
.tk-header .tk-container {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--tk-header-h);
}

.tk-logo { flex: none; display: block; }
.tk-logo img { height: 42px; width: auto; }

.tk-nav { margin-left: auto; }
.tk-nav > ul { display: flex; align-items: center; gap: 2px; }
.tk-nav > ul > li { position: relative; }
.tk-nav > ul > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: var(--tk-header-h);
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tk-ink);
    border-bottom: 3px solid transparent;
}
.tk-nav > ul > li > a:hover,
.tk-nav > ul > li.is-open > a { color: var(--tk-blue); border-bottom-color: var(--tk-blue); }
.tk-nav .tk-caret { width: 9px; height: 9px; opacity: .55; }

/* meni: kalkulator grijanja — istaknuto dugme sa natpisom na svim širinama (Miloš, 10.09.2026:
   samo ikona se nije isticala). Stavke se ne smiju lomiti u dva reda („O Nama“, „Povrat PDV-a“
   su se lomile), pa do 1259 px stavke dobijaju uži razmak i sitniji font, a do 1139 px i manji logo.
   Provjereno mjerenjem 1041–1920 px: nema preloma, preklapanja ni korpe van ekrana. */
.tk-nav > ul > li.tk-nav-kalk { margin-left: 8px; }
.tk-nav > ul > li.tk-nav-kalk > a {
    height: 40px;
    padding: 0 16px 0 13px;
    gap: 7px;
    border: 0;
    border-radius: 999px;
    background: var(--tk-blue);
    color: #fff;
}
.tk-nav > ul > li.tk-nav-kalk > a:hover { background: var(--tk-blue-dark); color: #fff; }
.tk-nav-kalk svg { width: 18px; height: 18px; flex: none; }
@media (min-width: 1041px) and (max-width: 1259px) {
    .tk-nav > ul > li > a { padding: 0 6px; font-size: 14px; }
    .tk-nav > ul > li.tk-nav-kalk { margin-left: 6px; }
    .tk-nav > ul > li.tk-nav-kalk > a { padding: 0 13px 0 11px; }
}
/* Ispod 1140 px ni to nije dovoljno — korpa bi izašla iz ekrana; logo manji. */
@media (min-width: 1041px) and (max-width: 1139px) {
    .tk-header .tk-logo img { height: 32px; }
}

.tk-header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.tk-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    background: #fff;
    cursor: pointer;
}
.tk-icon-btn:hover { border-color: var(--tk-ink); }
.tk-burger { display: none; }

/* mega meni sa kategorijama */
.tk-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(920px, calc(100vw - 40px));
    background: #fff;
    border: 1px solid var(--tk-line);
    border-top: 3px solid var(--tk-blue);
    box-shadow: var(--tk-shadow-lg);
    padding: 26px 28px;
    display: none;
}
.tk-nav > ul > li.is-open .tk-mega { display: block; }
.tk-mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2px 20px;
}
.tk .tk-mega-grid a {
    display: block;
    padding: 8px 10px;
    margin-left: -10px;
    border-radius: 3px;
    font-size: 14.5px;
    color: var(--tk-ink-2);
    min-height: 36px;
}
.tk .tk-mega-grid a:hover { background: var(--tk-blue-soft); color: var(--tk-blue-dark); }
.tk-mega-foot {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--tk-line-2);
}

/* pretraga */
.tk-search-bar {
    display: none;
    border-bottom: 1px solid var(--tk-line);
    background: var(--tk-surface);
    padding: 18px 0;
}
.tk-search-bar.is-open { display: block; }
.tk-search-form { display: flex; gap: 10px; max-width: 640px; margin: 0 auto; }
.tk-search-form input {
    flex: 1;
    min-height: 50px;
    padding: 12px 16px;
    border: 2px solid var(--tk-line);
    border-radius: var(--tk-radius);
    background: #fff;
    font: inherit;
    font-size: 16px;
    color: var(--tk-ink);
}
.tk-search-form input:focus { outline: none; border-color: var(--tk-blue); }

/* mobilna ladica */
.tk-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s ease;
    visibility: hidden;
}
.tk-drawer.is-open { transform: translateX(0); visibility: visible; }
.tk-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--tk-line);
    flex: none;
}
.tk-drawer-body { overflow-y: auto; padding: 8px 20px 40px; -webkit-overflow-scrolling: touch; }
.tk-drawer-body > ul > li { border-bottom: 1px solid var(--tk-line-2); }
.tk-drawer-body > ul > li > a,
.tk-drawer-acc > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: 0;
    font-size: 17px;
    font-weight: 700;
    text-align: left;
    color: var(--tk-ink);
    cursor: pointer;
    min-height: 56px;
}
/* ladica: kalkulator kao plavo dugme, isto kao u meniju na računaru (Miloš, 10.09.2026) */
.tk-drawer-body > ul > li.tk-drawer-kalk { border-bottom: 0; padding: 14px 0 6px; }
.tk .tk-drawer-body > ul > li.tk-drawer-kalk > a {
    display: inline-flex;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    min-height: 50px;
    padding: 0 24px 0 18px;
    border-radius: 999px;
    background: var(--tk-blue);
    color: #fff;
    font-size: 17px;
}
.tk .tk-drawer-body > ul > li.tk-drawer-kalk > a:hover { background: var(--tk-blue-dark); color: #fff; }
.tk-drawer-acc > button .tk-caret { transition: transform .2s ease; width: 12px; height: 12px; }
.tk-drawer-acc.is-open > button .tk-caret { transform: rotate(180deg); }
.tk-drawer-sub { display: none; padding: 0 0 14px; }
.tk-drawer-acc.is-open .tk-drawer-sub { display: block; }
.tk .tk-drawer-sub a {
    display: block;
    padding: 11px 0 11px 14px;
    border-left: 2px solid var(--tk-line);
    font-size: 15.5px;
    color: var(--tk-ink-2);
    min-height: 44px;
}
.tk .tk-drawer-sub a:hover { border-left-color: var(--tk-blue); color: var(--tk-blue); }
.tk-drawer-foot {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--tk-line);
    display: grid;
    gap: 10px;
}

/* ----------------------------------------------------------------- 7. HERO */
.tk-hero { position: relative; background: var(--tk-ink-bg); overflow: hidden; }
.tk-hero-bg { position: absolute; inset: 0; z-index: 0; }
.tk-hero-bg .tk-slide-media {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
}
.tk-hero-bg .tk-slide-media.is-active { opacity: 1; }
.tk-slide-media { position: absolute; inset: 0; }
.tk-slide-media img { width: 100%; height: 100%; object-fit: cover; }
.tk-slide-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(10,17,21,.94) 0%, rgba(10,17,21,.78) 38%, rgba(10,17,21,.28) 72%, rgba(10,17,21,.12) 100%);
}
.tk-slide-inner {
    position: relative;
    z-index: 2;
    min-height: clamp(420px, 56vw, 580px);
    display: flex;
    align-items: center;
    padding: 56px 0;
}
.tk-slide-copy { max-width: 40rem; color: #fff; }
.tk-slide-copy h1 { color: #fff; margin-bottom: 18px; }
.tk-slide-copy p { color: var(--tk-on-dark-2); font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 34rem; margin-bottom: 28px; }
.tk-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.tk-hero-dots {
    position: absolute;
    left: 0; right: 0;
    bottom: 22px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.tk-hero-dots button {
    width: 34px;
    height: 4px;
    padding: 12px 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}
.tk-hero-dots button::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.35);
    transition: background-color .2s ease;
}
.tk-hero-dots button.is-active::after { background: #fff; }

/* traka sa uslugama ispod hera */
.tk-hero-strip { background: var(--tk-blue); color: #fff; }
.tk-hero-strip ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.tk-hero-strip li + li { border-left: 1px solid rgba(255,255,255,.18); }
.tk-hero-strip li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
}
.tk-hero-strip svg { flex: none; width: 24px; height: 24px; opacity: .9; }

/* ------------------------------------------------------- 8. KARTICE/MREZE */
.tk-grid { display: grid; gap: var(--tk-gap); align-items: stretch; }
.tk-grid > * { min-width: 0; }
/* `min(320px, 100%)` a ne golih 320px: na ekranu od 320px kontejner ima 292px,
   pa je kolona od 320px virila iz ekrana i sjekla desnu ivicu panela. */
.tk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.tk-grid--3 { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.tk-grid--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* kategorija — plocica */
.tk-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tk-cat:hover { border-color: var(--tk-blue); box-shadow: var(--tk-shadow); transform: translateY(-2px); }
.tk-cat-media {
    height: 168px;
    flex: none;
    background: var(--tk-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-bottom: 1px solid var(--tk-line-2);
}
.tk-cat-media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.tk-cat-media .tk-cat-ph { color: var(--tk-ink-3); opacity: .5; width: 52px; height: 52px; }
.tk-cat-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.tk .tk-cat-name { font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--tk-ink); }
.tk-cat-count { font-size: 13px; color: var(--tk-ink-3); font-weight: 500; }
.tk .tk-cat:hover .tk-cat-name { color: var(--tk-blue); }

/* vijest — kartica */
.tk-post {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    overflow: hidden;
    height: 100%;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.tk-post:hover { border-color: var(--tk-blue); box-shadow: var(--tk-shadow); }
.tk-post-media {
    aspect-ratio: 16 / 9;
    background: var(--tk-surface);
    overflow: hidden;
    border-bottom: 1px solid var(--tk-line-2);
    padding: 14px;
}
/* Cover vijesti je cesto logotip, a ne fotografija — 'contain' ga ne sijece. */
.tk-post-media img { width: 100%; height: 100%; object-fit: contain; }
.tk-post-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tk .tk-post-date {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tk-blue);
}
.tk-post h3 { font-size: 1.08rem; }
.tk-post-excerpt { font-size: 14.5px; color: var(--tk-ink-2); line-height: 1.55; }
.tk-post-more { margin-top: auto; padding-top: 6px; }

/* vrsta vijesti — sličica umjesto covera (vlasnik, 10.09.2026). Akcija nosi
   topli akcent da se izdvoji od obavještenja. */
.tk-kind {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: var(--tk-radius);
    background: var(--tk-blue-soft);
    color: var(--tk-blue);
}
.tk-kind svg { width: 26px; height: 26px; }
.tk-kind--akcija { background: var(--tk-heat-soft); color: var(--tk-heat); }
.tk-post-head { display: flex; align-items: center; gap: 14px; }
.tk-post-head > div { display: grid; gap: 4px; }
.tk .tk-post-kind { font-size: 13.5px; font-weight: 600; color: var(--tk-ink-2); line-height: 1.2; }

/* istaknuti par (kamini / radijatori) */
.tk-promo {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 300px;
    padding: 28px;
    border-radius: var(--tk-radius);
    overflow: hidden;
    background: var(--tk-surface);
    color: #fff;
}
.tk-promo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.tk-promo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(10,17,21,.88) 0%, rgba(10,17,21,.45) 55%, rgba(10,17,21,.15) 100%);
    z-index: 1;
}
.tk-promo > div { position: relative; z-index: 2; }
.tk-promo h3 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: 8px; }
.tk-promo p { color: rgba(255,255,255,.82); font-size: 14.5px; margin-bottom: 14px; }
.tk .tk-promo .tk-link { color: #fff; }

/* statistika / brojevi */
.tk-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: rgba(255,255,255,.12); }
.tk-stat { background: var(--tk-ink-bg); padding: 26px 24px; }.tk-stat-n {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.tk-stat-l { margin-top: 8px; font-size: 14px; color: var(--tk-on-dark-2); line-height: 1.4; }

/* --------------------------------------------------------------- 9. FOOTER */
.tk-footer { background: var(--tk-ink-bg); color: var(--tk-on-dark-2); font-size: 14.5px; }
.tk-footer-main {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding: clamp(44px, 6vw, 68px) 0;
}
.tk-footer h4 {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.tk .tk-footer a { color: var(--tk-on-dark-2); }
.tk .tk-footer a:hover { color: #fff; }
.tk-footer-logo { height: 40px; width: auto; margin-bottom: 18px; }
.tk-footer-links li a { display: block; padding: 6px 0; min-height: 32px; }
.tk-footer address { font-style: normal; line-height: 1.7; }
.tk-footer address + address { margin-top: 14px; }
.tk-footer address b { color: #fff; font-weight: 600; }
.tk-contact-list li {
    display: flex;
    gap: 11px;
    padding: 7px 0;
    align-items: flex-start;
    line-height: 1.5;
}
.tk-contact-list svg { flex: none; width: 17px; height: 17px; margin-top: 3px; opacity: .6; }
.tk-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--tk-ink-3);
}

/* plutajuci kontakt */
.tk-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: 999px;
    box-shadow: var(--tk-shadow-lg);
}
.tk .tk-float span { font-size: 13.5px; font-weight: 700; padding-left: 6px; color: var(--tk-ink); }
.tk-float a {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.tk-float a svg { width: 22px; height: 22px; }
.tk-float .tk-viber { background: #7360f2; }
.tk-float .tk-wa { background: #25d366; }

/* ------------------------------------------------------ 10. UNUTRASNJE STR. */
.tk-pagehead { background: var(--tk-surface); border-bottom: 1px solid var(--tk-line); padding: clamp(30px, 4.5vw, 52px) 0; }
.tk-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--tk-ink-3); margin-bottom: 12px; }
.tk .tk-crumbs a { color: var(--tk-ink-3); }
.tk .tk-crumbs a:hover { color: var(--tk-blue); }
.tk-crumbs span[aria-hidden] { opacity: .5; }

.tk-prose { max-width: 72ch; font-size: 16.5px; line-height: 1.7; color: var(--tk-ink-2); }
.tk-prose h2, .tk-prose h3 { color: var(--tk-ink); margin: 1.8em 0 .6em; }
.tk-prose h2:first-child, .tk-prose h3:first-child { margin-top: 0; }
.tk-prose p { margin-bottom: 1.1em; overflow-wrap: break-word; }
/* Obostrano poravnanje teksta — zahtjev vlasnika 09.09.2026. Tek od 700px:
   na uzem ekranu je red prekratak, pa justify pravi rupe medju rijecima. */
@media (min-width: 700px) {
    .tk-prose p { text-align: justify; }
}
.tk-prose strong { color: var(--tk-ink); font-weight: 700; }
.tk-prose ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1.1em; }
.tk-prose li { margin-bottom: .4em; }
.tk .tk-prose a { color: var(--tk-blue); text-decoration: underline; text-underline-offset: 2px; }
.tk-prose img { margin: 1.4em 0; border-radius: var(--tk-radius); }
/* prvi pasus kao uvod — krupniji i tamniji */
.tk-prose--lead > p:first-child { font-size: 1.12em; line-height: 1.65; color: var(--tk-ink); }

/* O nama — blokovi po podnaslovima iz admina (Miloš, 10.09.2026). Redni broj
   ponavlja oblik datuma kod vijesti (plava crta lijevo), natpis oblik „UKRATKO“. */
.tk-about { max-width: 780px; }
.tk-about-blok {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 24px;
    padding: 30px 0;
    border-top: 1px solid var(--tk-line);
}
.tk-about-blok:first-child { border-top: 0; padding-top: 0; }
.tk-about-blok:last-child { padding-bottom: 0; }
.tk-about-br {
    display: block;
    align-self: start;   /* bez ovoga grid razvuče plavu crtu na cijelu visinu bloka */
    border-left: 3px solid var(--tk-blue);
    padding-left: 12px;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--tk-ink);
    font-variant-numeric: tabular-nums;
}
.tk .tk-about-naslov {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tk-blue);
}
.tk-about-sadrzaj .tk-prose { max-width: none; }
.tk-about .tk-prose > :last-child { margin-bottom: 0; }
@media (max-width: 720px) {
    .tk-about-blok { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
    .tk-about-br { font-size: 1.25rem; }
}

/* --------------------------------------------------------- 11. RESPONZIVNO */
@media (max-width: 1080px) {
    .tk-footer-main { grid-template-columns: 1fr 1fr; gap: 34px; }
}

/* Meni se izmedju 901 i 1039px nije uklapao: stavke su se lomile u dva reda, a
   dugme za korpu je izlazilo iz ekrana i bilo odsjeceno — `html` ima
   `overflow-x: clip`, pa se do njega nije moglo ni doskrolati. Zato ladica
   (burger) ide sve do 1040px; ostatak mobilnih pravila ostaje na 900px. */
@media (max-width: 1040px) {
    .tk-nav { display: none; }
    .tk-burger { display: inline-flex; }
}

@media (max-width: 900px) {
    :root { --tk-header-h: 64px; }
    .tk-hero-strip ul { grid-template-columns: repeat(2, 1fr); }
    .tk-hero-strip li:nth-child(3) { border-left: 0; }
    .tk-hero-strip li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); }
}

@media (max-width: 700px) {
    .tk-topbar-left .tk-topbar-hide { display: none; }
    .tk-footer-main { grid-template-columns: 1fr; gap: 30px; }
    .tk-slide-inner { min-height: 0; padding: 44px 0 52px; }
    .tk-slide-media::after {
        background: linear-gradient(0deg, rgba(10,17,21,.95) 0%, rgba(10,17,21,.82) 45%, rgba(10,17,21,.55) 100%);
    }
    .tk-float span { display: none; }
    .tk-float { padding: 8px; }
}

@media (max-width: 480px) {
    .tk-hero-strip ul { grid-template-columns: 1fr; }
    .tk-hero-strip li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
    .tk-logo img { height: 34px; }
    .tk-grid--4 { grid-template-columns: repeat(2, 1fr); --tk-gap: 14px; }
    .tk-cat-body { padding: 12px 12px 14px; }
    .tk-cat-name { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .tk *, .tk *::before, .tk *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --------- hero: donja traka sa oznakom proizvoda sa fotografije i tackama */
.tk-hero-foot {
    position: relative;
    z-index: 3;
    border-top: 1px solid rgba(255,255,255,.16);
    background: rgba(10,17,21,.42);
    backdrop-filter: blur(3px);
}
.tk-hero-foot .tk-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 64px;
}
.tk-hero-caps { position: relative; flex: 1; min-width: 0; }
.tk .tk-hero-cap {
    display: none;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    color: #fff;
    min-width: 0;
}
.tk .tk-hero-cap.is-active { display: flex; }
.tk-hero-cap-l {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tk-blue-bright);
}
.tk-hero-cap-t {
    font-size: 14.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tk .tk-hero-cap:hover .tk-hero-cap-t { text-decoration: underline; text-underline-offset: 3px; }

.tk-hero-foot .tk-hero-dots {
    position: static;
    justify-content: flex-end;
    flex: none;
    bottom: auto;
}

/* ------------------------------------------ panel: grijanje / hladjenje */
.tk-split {
    background: #fff;
    border: 1px solid var(--tk-line);
    border-top: 4px solid var(--tk-blue);
    border-radius: var(--tk-radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tk-split--heat { border-top-color: var(--tk-heat); }
.tk-split h3 { margin-bottom: 8px; }
.tk-split > p { color: var(--tk-ink-2); font-size: 15px; margin-bottom: 20px; }
.tk-split-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 20px;
    margin-top: auto;
}
.tk .tk-split-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--tk-line-2);
    font-size: 15px;
    font-weight: 600;
    color: var(--tk-ink);
    min-height: 44px;
}
.tk .tk-split-list a:hover { color: var(--tk-blue); }
.tk-split-list svg { flex: none; opacity: .35; transition: transform .18s ease, opacity .18s ease; }
.tk-split-list a:hover svg { opacity: 1; transform: translateX(3px); }
.tk-split--heat .tk-split-list a:hover { color: var(--tk-heat); }

@media (max-width: 700px) {
    .tk-hero-foot .tk-container { min-height: 56px; }
    .tk-hero-cap-l { display: none; }
    .tk-split { padding: 22px 20px; }
}

/* --------- slika koja nije uspjela da se ucita: mjesto se popuni znakom */
.tk-media-empty {
    position: relative;
    background:
        repeating-linear-gradient(135deg, var(--tk-surface) 0 10px, var(--tk-surface-2) 10px 20px);
}
.tk-cat-media.tk-media-empty::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 44px 44px;
    opacity: .3;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8d97' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E");
}
/* Kod vijesti je bolje da praznog mjesta uopste nema. */
.tk-post-media.tk-media-empty { display: none; }

/* ================================================= 12. LAYOUT SA BOCNOM KOLONOM */
.tk-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}
.tk-main-col { min-width: 0; }

.tk-side { display: grid; gap: 20px; position: sticky; top: calc(var(--tk-header-h) + 20px); }
.tk-side-box {
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    padding: 20px;
}
.tk-side-box h4,
.tk-side-cta h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tk-ink-3);
    margin-bottom: 12px;
}
.tk-side-list { max-height: none; }
.tk .tk-side-list a {
    display: block;
    padding: 9px 10px;
    margin: 0 -10px;
    border-radius: 3px;
    font-size: 14.5px;
    color: var(--tk-ink-2);
    min-height: 38px;
}
.tk .tk-side-list a:hover { background: var(--tk-surface); color: var(--tk-ink); }
.tk .tk-side-list a.is-active { background: var(--tk-blue-soft); color: var(--tk-blue-dark); font-weight: 700; }

.tk-side-cta {
    background: var(--tk-ink-bg);
    color: var(--tk-on-dark-2);
    border-radius: var(--tk-radius);
    padding: 22px 20px;
}
.tk-side-cta p { font-size: 14px; margin-bottom: 16px; }

/* ------------------------------------------------------ kartica proizvoda */
.tk-prod {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tk-prod:hover { border-color: var(--tk-blue); box-shadow: var(--tk-shadow); transform: translateY(-2px); }
.tk-prod-media {
    height: 210px;
    flex: none;
    background: var(--tk-surface);
    border-bottom: 1px solid var(--tk-line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.tk-prod-media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.tk-prod-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tk .tk-prod-name { font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--tk-ink); }
.tk-prod:hover .tk-prod-name { color: var(--tk-blue); }
.tk-prod-hook { font-size: 13.5px; color: var(--tk-ink-2); line-height: 1.5; margin: 0; }
.tk-prod-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--tk-line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tk-price-ask { font-size: 13px; font-weight: 700; color: var(--tk-ink-3); }
.tk-prod-foot svg { color: var(--tk-blue); opacity: .4; transition: opacity .18s ease, transform .18s ease; }
.tk-prod:hover .tk-prod-foot svg { opacity: 1; transform: translateX(3px); }

/* ------------------------------------------------------------- paginacija */
.tk-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
    flex-wrap: wrap;
}
.tk-pager-n { font-size: 14px; font-weight: 600; color: var(--tk-ink-3); }

/* ----------------------------------------------------------- prazno stanje */
.tk-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
    padding: 56px 24px;
    border: 1px dashed var(--tk-line);
    border-radius: var(--tk-radius);
    color: var(--tk-ink-3);
}
.tk-empty p { color: var(--tk-ink-2); max-width: 42ch; }

@media (max-width: 900px) {
    .tk-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    /* align-items: start - inace se u dvije kolone kutija Filter rastegne
       na visinu duge liste grupa i ostane pola prazna. */
    .tk-side { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
    /* Ovdje je ranije stajalo max-height: 320px BEZ overflow-a, pa je duga lista
       grupa curila van svoje kutije i crtala se preko Filtera i CTA bloka.
       Lista se prikazuje cijela — nista se ne krije i aktivna grupa je uvijek vidljiva. */
    .tk-side-list { max-height: none; }
    /* kalkulator preko obje kolone — kratka kutija pored duge liste ostavila bi rupu */
    .tk-side-kalk { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .tk-side { grid-template-columns: 1fr; }
    .tk-prod-media { height: 170px; }
}

/* ================================================== 13. STRANICA PROIZVODA */
.tk-pdp {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}
.tk-pdp-stage {
    height: clamp(300px, 42vw, 460px);
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
}
.tk-pdp-stage img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.tk-pdp-stage.tk-media-empty::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px 60px;
    opacity: .3;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8d97' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E");
}

.tk-pdp-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.tk-pdp-thumbs button {
    width: 76px;
    height: 76px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tk-pdp-thumbs button.is-active { border-color: var(--tk-blue); border-width: 2px; }
.tk-pdp-thumbs img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.tk-buybox {
    margin-top: 26px;
    border: 1px solid var(--tk-line);
    border-top: 4px solid var(--tk-blue);
    border-radius: var(--tk-radius);
    padding: 24px;
    background: #fff;
}
.tk-buybox-price { display: flex; align-items: baseline; gap: 12px; }
.tk-buybox-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tk-ink-3);
}
.tk-buybox-price strong {
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tk-ink);
}
.tk-buybox-note { font-size: 14.5px; color: var(--tk-ink-2); margin: 10px 0 18px; }
.tk-buybox-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tk-buybox-actions .tk-btn { flex: 1 1 190px; }
.tk-buybox-perks {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--tk-line-2);
    display: grid;
    gap: 8px;
}
.tk-buybox-perks li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--tk-ink-2);
}
.tk-buybox-perks li::before {
    content: "";
    flex: none;
    width: 15px; height: 15px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230079b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
}
.tk-pdp-note { margin-top: 18px; font-size: 14px; color: var(--tk-ink-3); }

.tk-pdp-details {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 44px;
    margin-top: clamp(40px, 6vw, 64px);
    padding-top: clamp(32px, 4vw, 44px);
    border-top: 1px solid var(--tk-line);
    align-items: start;
}
.tk-spec-table { width: 100%; border-collapse: collapse; }
.tk-spec-table td {
    padding: 11px 0;
    border-bottom: 1px solid var(--tk-line-2);
    font-size: 14.5px;
    color: var(--tk-ink-2);
}

@media (max-width: 900px) {
    .tk-pdp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .tk-pdp-details { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* Specifikacije stizu kao HTML tabele iz editora, sa zakucanim sirinama i visinama.
   Ovdje se te vrijednosti ponistavaju da tabela stane u kolonu i da se skroluje. */
.tk-spec-html { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tk-spec-html table {
    width: 100% !important;
    height: auto !important;
    border-collapse: collapse;
    font-size: 14.5px;
    margin: 0 0 18px;
}
.tk-spec-html tr,
.tk-spec-html td,
.tk-spec-html th {
    height: auto !important;
    width: auto !important;
}
.tk-spec-html td,
.tk-spec-html th {
    padding: 10px 12px !important;
    border: 1px solid var(--tk-line);
    color: var(--tk-ink-2);
    vertical-align: middle;
    text-align: left !important;
}
.tk-spec-html th { background: var(--tk-surface); color: var(--tk-ink); font-weight: 700; }
.tk-spec-html tr:nth-child(odd) td { background: #fff; }
.tk-spec-html tr:nth-child(even) td { background: var(--tk-surface); }
.tk-spec-html p { margin: 0; }
.tk-spec-html img { max-width: 100%; height: auto; }

/* ================================================ 14. UNUTRASNJE KOMPONENTE */
/* bocna kolona desno (o nama, obuka, proizvodnja) */
.tk-layout--flip { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 900px) { .tk-layout--flip { grid-template-columns: minmax(0, 1fr); } }

.tk-facts { display: grid; gap: 2px; }
.tk-facts li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tk-line-2);
}
.tk-facts li:last-child { border-bottom: 0; }
.tk-facts b {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tk-blue);
    min-width: 62px;
    /* „do 300 €“ se u bočnoj koloni lomio pa je € padao u drugi red. */
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.tk-facts span { font-size: 14px; color: var(--tk-ink-2); }

/* vijesti — clanak */
.tk-articles { display: grid; gap: 0; }
.tk-article {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 32px;
    padding: 34px 0;
    border-bottom: 1px solid var(--tk-line);
}
/* Bez ovoga se kolone ne mogu skupiti ispod sopstvene sirine slike (grid stavka
   ima `min-width: auto`), pa je na 320px cijela vijest bila 366px siroka i tekst
   je bio odsjecen desno. */
.tk-article,
.tk-article-side,
.tk-article-body,
.tk-article-cover { min-width: 0; }
.tk-article:first-child { border-top: 1px solid var(--tk-line); }
.tk-article-side { display: grid; gap: 16px; align-content: start; }
.tk-article-date {
    display: block;
    border-left: 3px solid var(--tk-blue);
    padding-left: 14px;
}
.tk-article-day {
    display: block;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--tk-ink);
    font-variant-numeric: tabular-nums;
}
.tk-article-my { display: block; font-size: 13.5px; color: var(--tk-ink-3); margin-top: 4px; }
.tk-article-cover img { width: 100%; border-radius: var(--tk-radius); }
.tk-article-kind { display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--tk-ink-2); }
.tk-article-body h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 14px; }

@media (max-width: 720px) {
    .tk-article { grid-template-columns: 1fr; gap: 16px; padding: 26px 0; }
    .tk-article-side { grid-auto-flow: row; }
    .tk-article-date { display: flex; align-items: baseline; gap: 8px; }
    .tk-article-day { font-size: 1.5rem; }
    .tk-article-my { margin-top: 0; }
}

/* prodajna mjesta */
.tk-loc {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    overflow: hidden;
    background: #fff;
}
.tk-loc-media { height: 220px; flex: none; background: var(--tk-surface-2); }
.tk-loc-media img { width: 100%; height: 100%; object-fit: cover; }
.tk-loc-body { padding: 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tk-loc-city { font-size: 1.3rem; }
.tk-loc-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.tk-loc-dl dt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tk-ink-3);
    padding-top: 2px;
}
.tk-loc-dl dd { margin: 0; font-size: 15px; color: var(--tk-ink-2); }
.tk .tk-loc-dl dd a { color: var(--tk-blue); font-weight: 600; }
.tk-loc-body .tk-link { margin-top: auto; }

@media (max-width: 520px) {
    .tk-loc-dl { grid-template-columns: 1fr; gap: 2px 0; }
    .tk-loc-dl dd { margin-bottom: 10px; }
}

/* mapa i video */
.tk-map { height: clamp(300px, 40vw, 440px); border-top: 1px solid var(--tk-line); }
.tk-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.25); }

.tk-video {
    position: relative;
    max-width: 900px;
    /* Bez ovoga blok od 900px stoji uz lijevu ivicu kontejnera od 1240px. */
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 16 / 9;
    background: var(--tk-ink-bg);
    border-radius: var(--tk-radius);
    overflow: hidden;
}
.tk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* usluge — mreza */
.tk-svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1px;
    background: var(--tk-line);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    overflow: hidden;
}
.tk-svc { background: #fff; padding: 26px 24px; }
.tk-svc h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.008em; line-height: 1.35; }
.tk-svc ul { margin-top: 12px; display: grid; gap: 6px; }
.tk-svc li {
    position: relative;
    padding-left: 16px;
    font-size: 14.5px;
    color: var(--tk-ink-2);
    line-height: 1.5;
}
.tk-svc li::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 6px; height: 6px;
    background: var(--tk-blue);
    border-radius: 50%;
}

/* lista sa kvacicama */
.tk-checklist { display: grid; gap: 10px; }
.tk-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15.5px;
    color: var(--tk-ink-2);
    line-height: 1.55;
}
.tk-checklist li::before {
    content: "";
    flex: none;
    width: 17px; height: 17px;
    margin-top: 4px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230079b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
}
.tk-checklist b { color: var(--tk-ink); font-weight: 700; }

/* galerija fotografija */
.tk-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 32px;
}
.tk-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--tk-radius);
}

/* Slicica cija slika nije stigla ne treba da stoji kao prazan kvadrat. */
.tk-pdp-thumbs button.tk-media-empty { display: none; }


/* --------- logo se na uskim ekranima mora skupiti da ne gura zaglavlje */
.tk-logo img { max-width: 100%; }
@media (max-width: 900px) {
    .tk-logo { min-width: 0; flex: 0 1 auto; }
    .tk-logo img { height: 36px; max-width: 200px; object-fit: contain; object-position: left center; }
    .tk-header .tk-container { gap: 12px; }
    .tk-header-actions { margin-left: auto; }
}
@media (max-width: 380px) {
    .tk-logo img { height: 30px; max-width: 150px; }
    .tk-container { padding: 0 14px; }
    .tk-icon-btn { width: 40px; height: 40px; }
}

/* Cover vijesti koji fali ne treba da ostavi prazan okvir. */
.tk-article-cover.tk-media-empty { display: none; }

/* ------------------- 15. VELICINA DODIRNIH POVRSINA (mobilni) --------------
   Sve sto se tapka mora imati bar ~44px visine na dodirnim ekranima. */
.tk .tk-topbar a { min-height: 28px; }
.tk .tk-lang a { min-height: 32px; display: inline-flex; align-items: center; }
.tk-hero-dots button { padding: 20px 0; }
.tk .tk-contact-list a { display: inline-block; padding: 3px 0; }

@media (max-width: 900px) {
    .tk-topbar .tk-container { min-height: 46px; }
    .tk .tk-topbar a { min-height: 44px; }
    .tk .tk-lang a { min-height: 40px; padding: 8px 12px; }
    .tk .tk-contact-list a { padding: 8px 0; min-height: 40px; }
    .tk .tk-footer-links li a { padding: 11px 0; min-height: 44px; }
    .tk-footer-bottom { font-size: 13px; }
}

/* --------- gornja traka i hero na uskim ekranima -------------------------- */
@media (max-width: 700px) {
    .tk-topbar { font-size: 13px; }
    .tk-topbar .tk-container { flex-wrap: wrap; gap: 0 14px; padding-top: 2px; padding-bottom: 2px; }
    .tk-topbar-left { gap: 0 16px; }
    /* "Dostava u cijeloj BiH" se ponavlja u traci odmah ispod hera. */
    .tk .tk-topbar-left .tk-topbar-hide { display: none; }
    /* Tacke slajdera su uzimale skoro cijelu sirinu i gusile natpis. */
    .tk-hero-dots button { width: 18px; }
    .tk-hero-dots { gap: 6px; }
    .tk-hero-foot .tk-container { gap: 12px; }

    /* Hero na telefonu (18.09.2026, Milos — predlog G2, pa pasus vracen): fotografija gore,
       dno joj se stapa u tamnu podlogu, natpis sa tackama sjeda preko tog prelaza, pa naslov i dugmad.
       Cijeli hero staje u jedan ekran (ispod proviri plava traka), a slika uzima
       ono sto ostane iznad teksta; tekst se preko prelaza malo penje na sliku.
       (Pasus je jednom bio sakriven — Milos: „previse je prazno, vrati tekst".)
       Ranije je preko cijele slike isao tekst i tamni prelaz, pa se proizvod nije vidio.
       Redoslijed ide preko `order`, HTML i skripta slajdera su isti. */
    .tk-hero {
        display: flex;
        flex-direction: column;
        /* 64px manje od ekrana: ispod proviri vrh plave trake, pa se vidi da ima jos
           sadrzaja (hero preko cijelog ekrana je izgledao kao kraj stranice). */
        height: calc(100svh - var(--tk-header-h) - 1px - 64px);
        min-height: min-content;   /* na malom ekranu radije naraste nego da se prelije */
        max-height: 800px;
    }
    .tk-hero-bg { position: relative; inset: auto; order: 0; flex: 1 1 auto; min-height: 150px; }
    .tk-slide-media img { object-position: 70% 55%; }
    .tk-slide-media::after {
        background: linear-gradient(180deg, rgba(14,21,25,0) 40%, rgba(14,21,25,.6) 68%, var(--tk-ink-bg) 100%);
    }
    .tk-hero-foot { order: 1; margin-top: -74px; background: transparent; border-top: 0; backdrop-filter: none; }
    .tk-hero-foot .tk-container { min-height: 54px; }
    .tk-slide-inner { order: 2; flex: none; padding: 4px 0 34px; }
    .tk-slide-copy .tk-eyebrow { margin-bottom: 8px; font-size: 11px; }
    .tk-slide-copy h1 { font-size: 30px; margin-bottom: 10px; }
    .tk-slide-copy p { font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
    /* Dugmad jedno ispod drugog, iste sirine (sirine onog sireg) — ranije je svako bilo
       sirine svog teksta, pa su se razlikovala (Milos). */
    .tk-hero-actions { display: grid; grid-template-columns: max-content; gap: 8px; }
    .tk-hero-actions .tk-btn { min-height: 44px; padding: 9px 18px; font-size: 14.5px; }
}

/* ============================ 15b. USLUGE: MASINSKE INSTALACIJE (tamna traka) */
/* Cetiri usluge sa slicicom, na tamnoj podlozi (.tk-section--ink). Tekst svake
   stavke stoji u cjelini — vlasnik izricito ne zeli razbijanje na podstavke. */
.tk-msvc {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px 40px;
}
/* Tacno dvije kolone, da cetiri stavke stoje dva gore i dva dolje. Sa
   auto-fit-om je na sirokom ekranu ispadalo tri kolone i cetvrta stavka je
   ostajala sama u drugom redu. */
@media (min-width: 860px) {
    .tk-msvc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tk-msvc li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    color: var(--tk-on-dark-2);
    font-size: 16px;
    line-height: 1.55;
}
.tk-msvc li svg {
    flex: none;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    color: var(--tk-blue-bright);
}
.tk-msvc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(28px, 3.5vw, 40px);
}

/* Ista lista na svijetloj podlozi — proizvodne usluge. Vlasnik je 09.09.2026.
   trazio isti raspored kao gore, ali na svijetlom, da se dvije tamne trake ne
   sliju u jednu crnu povrsinu. Naziv usluge je <strong>, detalji u nastavku. */
.tk-msvc--light li { color: var(--tk-ink-2); }
.tk-msvc--light li svg { color: var(--tk-blue); }
.tk-msvc--light li strong {
    color: var(--tk-ink);
    font-weight: 700;
}

/* ================================================== 16. POVRAT PDV-a (traka) */
.tk-pdv-band { background: var(--tk-ink-bg); color: var(--tk-on-dark); }
.tk-pdv-band h2 { color: #fff; }
.tk-pdv-band .tk-lead { color: var(--tk-on-dark-2); }
.tk-pdv-band .tk-lead strong { color: #fff; }
.tk-pdv {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
}
.tk-pdv-copy .tk-btn { margin-top: 24px; }
.tk-pdv-steps { display: grid; gap: 2px; }
.tk-pdv-steps li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 18px;
    background: rgba(255,255,255,.05);
}
.tk-pdv-steps span {
    flex: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tk-blue-bright);
    color: #06222e;
    font-weight: 800;
    font-size: 14px;
}
.tk-pdv-steps div { font-size: 14.5px; color: var(--tk-on-dark-2); line-height: 1.5; }
.tk-pdv-steps b { display: block; color: #fff; font-size: 15px; margin-bottom: 2px; }

@media (max-width: 860px) { .tk-pdv { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* --------------------------------------------------- koraci (PDV stranica) */
.tk-steps { display: grid; gap: 0; counter-reset: none; }
.tk-steps > li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0 20px;
    padding: 26px 0;
    border-bottom: 1px solid var(--tk-line);
}
.tk-steps > li:first-child { border-top: 1px solid var(--tk-line); }
.tk-steps-n {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tk-blue-soft);
    color: var(--tk-blue-dark);
    font-weight: 800;
    font-size: 17px;
}
.tk-steps h2 { font-size: 1.15rem; margin-bottom: 8px; }
.tk-steps p { color: var(--tk-ink-2); font-size: 15.5px; margin: 0; }
.tk-steps b { color: var(--tk-ink); font-weight: 700; }

.tk-callout {
    margin-top: 32px;
    border-left: 4px solid var(--tk-heat);
    background: var(--tk-heat-soft);
    padding: 20px 22px;
    border-radius: 0 var(--tk-radius) var(--tk-radius) 0;
}
.tk-callout h3 { font-size: 1rem; margin-bottom: 6px; }
.tk-callout p { margin: 0; font-size: 15px; color: var(--tk-ink-2); }
.tk-callout b { color: var(--tk-ink); }

@media (max-width: 560px) {
    .tk-steps > li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ============================================================ 17. KONTAKT */
.tk-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1px;
    background: var(--tk-line);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    overflow: hidden;
}
.tk-contact-card { background: #fff; padding: 26px 24px; }
.tk-contact-card address { font-style: normal; line-height: 1.7; color: var(--tk-ink-2); font-size: 15.5px; }
.tk-contact-lines { display: grid; gap: 2px; }
.tk-contact-lines li { font-size: 15.5px; color: var(--tk-ink-2); padding: 5px 0; }
.tk .tk-contact-lines a { color: var(--tk-ink); font-weight: 600; display: inline-block; padding: 4px 0; min-height: 34px; }
.tk .tk-contact-lines a:hover { color: var(--tk-blue); }

/* Prodajno mjesto: na desktopu fotografija OBJEKTA stoji sa strane, ne kao
   niska traka preko cijele sirine — tako se objekat vidi kako treba. */
.tk-places { display: grid; gap: 24px; }
.tk-place {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    overflow: hidden;
    background: #fff;
}
.tk-place-media { background: var(--tk-surface-2); min-height: 300px; }
.tk-place-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-place-body {
    padding: 30px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}
.tk-place-city { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.tk-place-body .tk-loc-dl { width: 100%; }
.tk-place-body .tk-link { margin-top: auto; }

@media (max-width: 820px) {
    .tk-place { grid-template-columns: minmax(0, 1fr); }
    .tk-place-media { min-height: 0; height: 240px; }
    .tk-place-body { padding: 24px; }
}

/* -------------------------------------------------------- filter po tagovima */
.tk-tagfilter { display: grid; gap: 2px; }
.tk-tagfilter label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    min-height: 40px;
    cursor: pointer;
    font-size: 14.5px;
    color: var(--tk-ink-2);
}
.tk-tagfilter input { width: 17px; height: 17px; accent-color: var(--tk-blue); flex: none; }
.tk-tagfilter label:hover span { color: var(--tk-ink); }

/* ================================================= 18. KORPA / UPIT ------- */
.tk-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* dugme korpe u zaglavlju */
.tk-cart-btn { position: relative; }
.tk-cart-badge {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--tk-heat);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tk-flash {
    background: var(--tk-blue-soft);
    border-left: 4px solid var(--tk-blue);
    color: var(--tk-blue-dark);
    font-weight: 600;
    padding: 14px 18px;
    margin-bottom: 24px;
    border-radius: 0 var(--tk-radius) var(--tk-radius) 0;
}
.tk-errors {
    background: var(--tk-heat-soft);
    border-left: 4px solid var(--tk-heat);
    padding: 16px 20px;
    margin-bottom: 26px;
    border-radius: 0 var(--tk-radius) var(--tk-radius) 0;
    color: var(--tk-ink-2);
}
.tk-errors b { color: var(--tk-ink); display: block; margin-bottom: 6px; }
.tk-errors ul { list-style: disc; padding-left: 1.2em; }
.tk-errors li { margin-bottom: 3px; font-size: 14.5px; }

/* tabela korpe */
.tk-cart { border-top: 1px solid var(--tk-line); }
.tk-cart-head,
.tk-cart-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 52px;
    gap: 20px;
    align-items: center;
}
.tk-cart-head {
    padding: 12px 0;
    border-bottom: 1px solid var(--tk-line);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tk-ink-3);
}
.tk-cart-row { padding: 18px 0; border-bottom: 1px solid var(--tk-line-2); }
.tk-cart-item { display: flex; align-items: center; gap: 16px; min-width: 0; }
.tk-cart-thumb {
    flex: none;
    width: 82px; height: 82px;
    background: var(--tk-surface);
    border: 1px solid var(--tk-line-2);
    border-radius: var(--tk-radius);
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
}
.tk-cart-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tk .tk-cart-name {
    display: block;
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.35;
    color: var(--tk-ink);
    margin-bottom: 4px;
}
.tk .tk-cart-name:hover { color: var(--tk-blue); }
.tk-cart-qty input,
.tk-addform input[type="number"] {
    width: 100%;
    min-height: 46px;
    padding: 8px 10px;
    border: 2px solid var(--tk-line);
    border-radius: var(--tk-radius);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: var(--tk-ink);
    background: #fff;
}
.tk-cart-qty input:focus,
.tk-addform input:focus { outline: none; border-color: var(--tk-blue); }
.tk .tk-cart-remove a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--tk-radius);
    color: var(--tk-ink-3);
}
.tk .tk-cart-remove a:hover { color: var(--tk-heat); background: var(--tk-heat-soft); }

.tk-cart-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
}
.tk-cart-foot-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tk-cart-count { font-size: 14.5px; font-weight: 600; color: var(--tk-ink-3); }

@media (max-width: 620px) {
    .tk-cart-head { display: none; }
    .tk-cart-row {
        grid-template-columns: minmax(0, 1fr) 96px;
        grid-template-areas: "item qty" "remove remove";
        row-gap: 12px;
    }
    .tk-cart-item { grid-area: item; }
    .tk-cart-qty { grid-area: qty; }
    .tk-cart-remove { grid-area: remove; justify-self: start; }
    .tk-cart-thumb { width: 64px; height: 64px; }
    .tk-cart-foot { flex-direction: column; align-items: stretch; }
    .tk-cart-foot .tk-btn { width: 100%; }
    .tk-cart-foot-right { flex-direction: column-reverse; align-items: stretch; }
}

/* dodavanje sa stranice proizvoda */
.tk-addform {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    margin: 18px 0;
}
.tk-addform .tk-btn { width: 100%; }
.tk-addform-link { width: 100%; margin: 18px 0; }

/* ============================ 15c. ARTIKLI (SIFRE) NA STRANICI PROIZVODA */
/* Proizvod = grupa (npr. "Bakarne cijevi u sipci"), artikli = pojedinacne sifre
   iz Prokontika sa jedinicom mjere. Kupac upise kolicine i sve odjednom doda u
   upit. Vlasnik 09.09.2026. Na uskom ekranu tabela skroluje u svom okviru. */
.tk-pdp-items { margin-top: clamp(32px, 4vw, 48px); }
.tk-items-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    background: #fff;
}
.tk-items { width: 100%; min-width: 440px; border-collapse: collapse; }
.tk-items th,
.tk-items td {
    padding: 4px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--tk-line-2);
}
.tk-items td { font-size: 14px; line-height: 1.3; }
.tk-items th {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tk-ink-3);
    background: var(--tk-surface);
}
.tk-items tbody tr:last-child td { border-bottom: 0; }
.tk-items-sku { font-weight: 700; color: var(--tk-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-items-unit { color: var(--tk-ink-2); white-space: nowrap; }
.tk-items-qty { width: 84px; }
.tk-items-qty input {
    width: 84px;
    min-height: 29px;
    padding: 2px 8px;
    border: 2px solid var(--tk-line);
    border-radius: var(--tk-radius);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: var(--tk-ink);
    background: #fff;
}
.tk-items-qty input:focus { outline: none; border-color: var(--tk-blue); }
.tk-items-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 16px;
}
.tk-items-foot p { margin: 0; font-size: 14.5px; color: var(--tk-ink-2); }

/* Na telefonu tabela postaje kartice — inace kolona "Kolicina" ostane izvan
   okvira i kupac mora skrolati bocno da bi upisao metre. Redoslijed u kartici
   (naziv, pa sifra i j.m., pa polje) pravi se flex-om, jer je u HTML-u sifra prva. */
@media (max-width: 700px) {
    .tk-items-wrap { overflow: visible; border: 0; background: transparent; }
    .tk-items { min-width: 0; }
    .tk-items thead { display: none; }
    .tk-items tbody, .tk-items td { display: block; }
    .tk-items tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 6px;
        border: 1px solid var(--tk-line);
        border-radius: var(--tk-radius);
        background: #fff;
        padding: 12px 14px;
        margin-bottom: 8px;
    }
    .tk-items td { border: 0; padding: 0; }
    .tk-items-name {
        order: 1;
        width: 100%;
        font-weight: 700;
        color: var(--tk-ink);
        line-height: 1.35;
        margin-bottom: 6px;
    }
    .tk-items-sku { order: 2; font-size: 13px; font-weight: 400; color: var(--tk-ink-3); }
    .tk-items-sku::before { content: "Šifra "; }
    .tk-items-unit { order: 3; font-size: 13px; color: var(--tk-ink-3); }
    .tk-items-unit::before { content: "· "; }
    .tk-items-qty { order: 4; width: 100%; margin-top: 10px; }
    /* Na dodir polje mora ostati krupno (tap-target >= 40px), iako je na
       desktopu snizeno na zahtjev vlasnika 09.09. */
    .tk-items-qty input { width: 100%; min-height: 44px; padding: 8px 10px; }
    .tk-items-foot { flex-direction: column; align-items: stretch; }
    .tk-items-foot .tk-btn { width: 100%; }
}
.tk-cart-sku { display: block; font-size: 13px; color: var(--tk-ink-3); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.tk-summary-sku { color: var(--tk-ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }

/* brzo dodavanje sa kartice u kategoriji */
.tk-prod-wrap { display: flex; flex-direction: column; height: 100%; }
.tk-prod-wrap .tk-prod { flex: 1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.tk-prod-add { display: block; }
.tk-prod-add button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--tk-line);
    border-top: 0;
    border-radius: 0 0 var(--tk-radius) var(--tk-radius);
    background: var(--tk-surface);
    font-size: 14px;
    font-weight: 700;
    color: var(--tk-ink-2);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.tk-prod-add button:hover { background: var(--tk-blue); border-color: var(--tk-blue); color: #fff; }

/* ------------------------------------------------------------ checkout */
.tk-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: start;
}
.tk-fieldset { border: 0; padding: 0; margin: 0 0 32px; }
.tk-fieldset legend {
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tk-ink-3);
    margin-bottom: 14px;
}
.tk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tk-field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-field--wide { grid-column: 1 / -1; }
.tk-field label { font-size: 14px; font-weight: 600; color: var(--tk-ink); }
.tk-field label span { color: var(--tk-heat); }
.tk-field input,
.tk-field textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 2px solid var(--tk-line);
    border-radius: var(--tk-radius);
    background: #fff;
    font: inherit;
    font-size: 16px;
    color: var(--tk-ink);
}
.tk-field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.tk-field input:focus,
.tk-field textarea:focus { outline: none; border-color: var(--tk-blue); }
.tk-field small { font-size: 13px; color: var(--tk-ink-3); }

.tk-summary {
    border: 1px solid var(--tk-line);
    border-top: 4px solid var(--tk-blue);
    border-radius: var(--tk-radius);
    padding: 24px;
    position: sticky;
    top: calc(var(--tk-header-h) + 20px);
    background: #fff;
}
.tk-summary h2 { font-size: 1.05rem; margin-bottom: 14px; }
.tk-summary-list { display: grid; gap: 0; }
.tk-summary-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tk-line-2);
    font-size: 14.5px;
}
.tk-summary-name { color: var(--tk-ink-2); line-height: 1.4; }
.tk-summary-qty { flex: none; font-weight: 700; color: var(--tk-ink); font-variant-numeric: tabular-nums; }
.tk-summary-note { font-size: 13.5px; color: var(--tk-ink-3); margin: 16px 0 18px; }

@media (max-width: 900px) {
    .tk-checkout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .tk-summary { position: static; }
}
@media (max-width: 560px) {
    .tk-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------ kalkulator grijanja — vodič (10.09.2026) */
.tk-wiz-sec { padding-top: 40px; }
.tk-wiz-wrap { max-width: 860px; }
.tk-wiz-head { text-align: center; margin: 0 auto 26px; max-width: 620px; }
.tk .tk-wiz-head h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 10px 0 10px; }
.tk .tk-wiz-head p { font-size: 17px; color: var(--tk-ink-2); margin: 0; }

.tk-wiz {
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: 14px;
    box-shadow: var(--tk-shadow);
    padding: 22px 26px 30px;
}
.tk-wiz[hidden] { display: none !important; }
.tk-wiz-top { display: none; align-items: center; justify-content: space-between; min-height: 36px; }
.tk-wiz.is-js .tk-wiz-top { display: flex; }
.tk-wiz-back {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 6px 10px 6px 4px;
    border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--tk-ink-2);
}
.tk-wiz-back:hover { color: var(--tk-blue); }
.tk-wiz-count { font-size: 14px; color: var(--tk-ink-3); }
.tk-wiz-count b { color: var(--tk-ink); }
.tk-wiz-progress { display: none; height: 6px; margin: 8px 0 22px; border-radius: 999px; background: var(--tk-surface-2); overflow: hidden; }
.tk-wiz.is-js .tk-wiz-progress { display: block; }
.tk-wiz-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--tk-blue), var(--tk-blue-bright)); transition: width .35s ease; }

.tk-step { border: 0; margin: 0 0 34px; padding: 0; min-width: 0; }
.tk-wiz.is-js .tk-step { display: none; margin: 0; }
.tk-wiz.is-js .tk-step.is-on { display: block; animation: tkStepIn .32s ease both; }
@keyframes tkStepIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tk-wiz.is-js .tk-step.is-on { animation: none; } .tk-wiz-progress span { transition: none; } }
.tk-step legend {
    display: block; width: 100%; padding: 0; margin: 0 0 18px;
    font-size: clamp(1.35rem, 3.6vw, 1.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--tk-ink);
    text-align: center;
}
.tk-step legend[hidden], .tk-step [data-za][hidden] { display: none !important; }
.tk .tk-step-hint { text-align: center; color: var(--tk-ink-3); margin: -8px 0 16px; font-size: 15px; }

/* velike kartice za izbor */
.tk-cards { display: grid; gap: 12px; }
.tk-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tk-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk-cards--list { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.tk-card { position: relative; display: block; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tk-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tk-card > span {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    height: 100%; min-height: 128px; padding: 18px 12px;
    border: 2px solid var(--tk-line); border-radius: 12px; background: #fff;
    text-align: center; transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tk-card svg { width: 46px; height: 46px; color: var(--tk-blue); margin-bottom: 4px; }
.tk-card b { font-size: 16.5px; font-weight: 700; color: var(--tk-ink); line-height: 1.25; }
.tk-card small { font-size: 13.5px; color: var(--tk-ink-3); line-height: 1.35; }
@media (hover: hover) { .tk-card:hover > span { border-color: var(--tk-blue); transform: translateY(-2px); box-shadow: var(--tk-shadow); } }
.tk-card input:checked + span { border-color: var(--tk-blue); background: var(--tk-blue-soft); }
.tk-card input:focus-visible + span { outline: 3px solid var(--tk-blue-bright); outline-offset: 2px; }

/* površina */
.tk-area { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 16px; }
.tk-area input {
    width: 190px; min-height: 70px; padding: 8px 14px;
    border: 2px solid var(--tk-line); border-radius: 12px; background: #fff;
    font: inherit; font-size: 34px; font-weight: 800; text-align: center; color: var(--tk-ink);
    -moz-appearance: textfield;
}
.tk-area input::-webkit-outer-spin-button, .tk-area input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tk-area input:focus { outline: none; border-color: var(--tk-blue); }
.tk-area span { font-size: 24px; font-weight: 700; color: var(--tk-ink-2); }
.tk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; }
.tk-chip {
    min-height: 44px; padding: 8px 16px;
    border: 2px solid var(--tk-line); border-radius: 999px; background: #fff; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--tk-ink);
}
.tk-chip:hover, .tk-chip.is-on { border-color: var(--tk-blue); background: var(--tk-blue-soft); }
.tk .tk-step-err { text-align: center; color: var(--tk-heat); font-weight: 600; margin: 0 0 14px; }
.tk-step-next { display: none; }
.tk-wiz.is-js .tk-step-next { display: flex; margin: 0 auto; min-width: 180px; }
.tk-wiz.is-js .tk-wiz-submit { display: none; }

/* ------------------------------------------------------------------ rezultat */
#tk-wiz-rezultat.is-loading { opacity: .45; pointer-events: none; transition: opacity .2s; }
/* minmax(0, 1fr): bez toga grid kolona naraste do najšireg sadržaja. Android crta padajuću
   listu „Mjesto“ širom (najduža opcija), pa su svi okviri rezultata izlazili desno van
   ekrana (Miloš, snimak sa telefona 10.09.2026). */
.tk-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; animation: tkStepIn .35s ease both; }
.tk-res > * { min-width: 0; }
.tk .tk-res h3 { font-size: 1.05rem; margin: 0 0 12px; }

.tk-res-hero {
    text-align: center; padding: 30px 22px 24px; border-radius: 14px;
    background: linear-gradient(160deg, var(--tk-blue-soft), #fff 70%); border: 1px solid var(--tk-line);
}
.tk .tk-res-kicker { margin: 0; font-size: 16px; color: var(--tk-ink-2); }
.tk .tk-res-big { margin: 6px 0 2px; line-height: 1; }
.tk-res-big b { font-size: clamp(3.2rem, 11vw, 5rem); font-weight: 800; letter-spacing: -0.04em; color: var(--tk-ink); font-variant-numeric: tabular-nums; }
.tk-res-big span { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; color: var(--tk-blue); }
.tk .tk-res-sub { margin: 4px 0 16px; color: var(--tk-ink-2); font-size: 15.5px; }
.tk-res-zona { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 100%; font-size: 14px; color: var(--tk-ink-3); }
.tk-res-zona select {
    width: 100%; max-width: 340px; min-width: 0; min-height: 40px; padding: 6px 34px 6px 12px;
    text-overflow: ellipsis;
    border: 1px solid var(--tk-line); border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8d97' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
    font: inherit; font-size: 14px; color: var(--tk-ink); appearance: none;
}

/* napomena na dnu rezultata — mirna, ne kao upozorenje */
.tk-res-okvirno {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 14px 16px; border-radius: 10px;
    background: var(--tk-surface);
    font-size: 14px; line-height: 1.55; color: var(--tk-ink-2);
}
.tk-res-okvirno svg { flex: none; color: var(--tk-ink-3); margin-top: 1px; }
.tk .tk-res-okvirno p { margin: 0; }
.tk-res-okvirno b { color: var(--tk-ink); }

.tk-res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tk-res-card { padding: 20px; border: 1px solid var(--tk-line); border-radius: 12px; background: #fff; }
.tk-scale { position: relative; padding: 6px 0; }
.tk-scale-bar { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #2e9d5b 0%, #9bc53d 30%, #f2c230 55%, #f08a24 78%, #d1490f 100%); }
.tk-scale-dot {
    position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border-radius: 50%; background: #fff; border: 4px solid var(--tk-ink); box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.tk-scale-legend { display: flex; justify-content: space-between; font-size: 13px; color: var(--tk-ink-3); margin-top: 4px; }
.tk .tk-res-level { margin: 10px 0 0; font-size: 18px; font-weight: 800; color: var(--tk-ink); }
.tk-res-fuel { display: grid; gap: 12px; }
.tk-res-fuel li { display: flex; gap: 12px; align-items: center; }
.tk-res-fuel-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--tk-blue-soft); color: var(--tk-blue); }
.tk-res-fuel-txt { font-size: 15px; color: var(--tk-ink-2); line-height: 1.3; }
.tk-res-fuel-txt b { font-size: 20px; color: var(--tk-ink); font-variant-numeric: tabular-nums; }
.tk-res-fuel-txt small { display: block; font-size: 13px; color: var(--tk-ink-3); }

.tk-res-tips { padding: 20px; border: 1px solid var(--tk-line); border-radius: 12px; background: #fff; }
.tk-res-tips ul { display: grid; gap: 12px; }
.tk-res-tip { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--tk-ink); }
.tk-res-tip svg { flex: none; color: var(--tk-blue); margin-top: 1px; }
.tk-res-tip--upozorenje svg { color: var(--tk-heat); }

.tk-res-komplet { padding: 20px; border: 1px solid var(--tk-line); border-left: 4px solid var(--tk-blue); border-radius: 12px; background: #fff; }
.tk .tk-res-komplet ul { display: grid; gap: 10px; margin: 0 0 12px; }
.tk-res-komplet li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.tk-res-komplet li svg { flex: none; color: var(--tk-blue); margin-top: 1px; }
.tk-res-komplet li a { font-weight: 700; color: var(--tk-blue); }
.tk-res-komplet li b { color: var(--tk-ink); }
.tk-res-komplet li small { display: block; font-size: 13.5px; color: var(--tk-ink-3); }
.tk .tk-res-komplet-note { margin: 0; font-size: 13.5px; color: var(--tk-ink-3); }

.tk-res-cta {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px;
    padding: 24px; border-radius: 14px; background: var(--tk-ink-bg); color: var(--tk-on-dark-2);
}
.tk .tk-res-cta h3 { color: #fff; font-size: 1.35rem; }
.tk .tk-res-cta p { font-size: 15px; margin: 0 0 16px; }
.tk-res-call { display: inline-flex; align-items: center; gap: 8px; }
.tk-res-form { display: grid; gap: 10px; padding: 16px; border-radius: 12px; background: rgba(255,255,255,.06); }
.tk .tk-res-form-h { margin: 0 0 2px; color: #fff; font-weight: 700; font-size: 15px; }
.tk-res-form-err { display: grid; gap: 2px; padding: 8px 12px; border-radius: 8px; background: var(--tk-heat-soft); color: var(--tk-heat); font-size: 14px; font-weight: 600; }
.tk-res-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tk-res-seg label { position: relative; margin: 0; cursor: pointer; }
.tk-res-seg input { position: absolute; opacity: 0; }
.tk-res-seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); color: var(--tk-on-dark-2); font-size: 14px; font-weight: 600; text-align: center; line-height: 1.2; }
.tk-res-seg input:checked + span { background: #fff; color: var(--tk-ink); border-color: #fff; }
.tk-res-seg input:focus-visible + span { outline: 3px solid var(--tk-blue-bright); outline-offset: 2px; }
.tk-res-in { display: grid; gap: 4px; margin: 0; }
.tk-res-in > span { font-size: 13px; font-weight: 600; }
.tk-res-in input { width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid transparent; border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: var(--tk-ink); }
.tk-res-in input:focus { outline: none; border-color: var(--tk-blue-bright); }
.tk-res-cta .tk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tk-res-products { padding: 20px; border: 1px solid var(--tk-line); border-radius: 12px; background: #fff; }
.tk-res-products li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--tk-line-2); font-size: 15px; }
.tk-res-products li:last-child { border-bottom: 0; }
.tk-res-products a { font-weight: 700; color: var(--tk-blue); }
.tk-res-products small { color: var(--tk-ink-3); font-size: 13.5px; }

.tk-res-klima { padding: 20px; border: 1px dashed var(--tk-line); border-radius: 12px; background: var(--tk-surface); }
.tk-res-klima-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.tk-res-in--m2 { display: flex; align-items: center; gap: 8px; }
.tk-res-in--m2 input { width: 96px; border: 2px solid var(--tk-line); text-align: center; font-weight: 700; }
.tk-res-in--m2 > span { font-size: 15px; font-weight: 600; color: var(--tk-ink-2); }
.tk-res-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--tk-ink-2); cursor: pointer; }
.tk-res-check input { width: 20px; height: 20px; accent-color: var(--tk-blue); }
.tk-res-klima [data-klima-out] { margin: 0 0 8px; font-size: 15.5px; color: var(--tk-ink); }

.tk-card[hidden] { display: none !important; }
/* kombinovano grijanje: upis m² podnog */
.tk-kombi { margin-top: 22px; text-align: center; }
.tk-kombi[hidden], [data-za-inst][hidden] { display: none !important; }
.tk-kombi > label { display: block; margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--tk-ink); }
.tk .tk-kombi .tk-step-hint { margin: 0 0 12px; }
.tk .tk-res-again { text-align: center; margin: 4px 0 0; }

@media (max-width: 700px) {
    /* mjesto ispod vodiča za plutajuće Viber/WhatsApp dugme, da ne pokrije „Dalje“ */
    .tk-wiz-sec { padding-top: 24px; padding-bottom: 96px; }
    .tk-wiz { padding: 16px 14px 22px; border-radius: 12px; }
    .tk-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tk-card > span { min-height: 104px; padding: 12px 8px; }
    .tk-cards--3 .tk-card > span { min-height: 92px; }
    .tk-card svg { width: 40px; height: 40px; }
    .tk-res-grid, .tk-res-cta { grid-template-columns: minmax(0, 1fr); }
    .tk-res-cta { padding: 20px 16px; }
}
@media (max-width: 380px) {
    .tk-cards--2, .tk-cards--3 { gap: 8px; }
    .tk-card b { font-size: 15px; }
}

/* ------------------- kalkulator na stranicama grupa i proizvoda (Miloš, 10.09.2026) */
.tk-side-kalk {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--tk-line);
    border-left: 4px solid var(--tk-blue);
    border-radius: var(--tk-radius);
    background: var(--tk-blue-soft);
    color: var(--tk-ink);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tk-side-kalk:hover { border-color: var(--tk-blue); box-shadow: var(--tk-shadow); }
.tk-side-kalk-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tk-blue); color: #fff; }
.tk-side-kalk-ic svg { width: 22px; height: 22px; }
.tk-side-kalk b { display: block; font-size: 15px; line-height: 1.3; }
.tk-side-kalk-cta { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--tk-blue); }
.tk .tk-pdp-kalk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: var(--tk-blue-soft);
    font-size: 14.5px;
    color: var(--tk-ink-2);
}
.tk-pdp-kalk svg { width: 17px; height: 17px; flex: none; color: var(--tk-blue); }
.tk-pdp-kalk a { font-weight: 700; color: var(--tk-blue); }

/* --------------------------- naslovna: prečica do kalkulatora grijanja (10.09.2026) */
.tk-kalk {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 38px 42px;
    border: 1px solid var(--tk-line);
    border-radius: 18px;
    background: radial-gradient(120% 140% at 0% 0%, var(--tk-blue-soft) 0%, #fff 58%), #fff;
    box-shadow: var(--tk-shadow);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.tk-kalk:hover { border-color: var(--tk-blue); box-shadow: var(--tk-shadow-lg); transform: translateY(-2px); }
.tk-kalk:focus-visible { outline: 3px solid var(--tk-blue-bright); outline-offset: 4px; }
.tk-kalk-copy { display: flex; gap: 28px; align-items: flex-start; }
.tk-kalk-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--tk-blue), var(--tk-blue-bright));
    color: #fff;
    box-shadow: 0 14px 34px rgba(0, 121, 184, .30);
}
.tk-kalk-ic svg { width: 64px; height: 64px; }
.tk .tk-kalk h2 { margin: 8px 0 10px; }
.tk .tk-kalk .tk-lead { margin: 0 0 16px; }
/* .tk ispred: opšte „.tk ul { margin: 0 }“ je jače i pojelo bi razmak do dugmeta */
.tk .tk-kalk-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.tk-kalk-steps li {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--tk-line); border-radius: 999px; background: #fff;
    font-size: 14px; font-weight: 600; color: var(--tk-ink-2);
}
.tk-kalk-steps b {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--tk-blue-soft); color: var(--tk-blue); font-size: 12px;
}
.tk-kalk small { display: block; margin-top: 12px; font-size: 13px; color: var(--tk-ink-3); }
.tk-kalk-demo {
    position: relative;
    padding: 26px 24px 22px;
    border-radius: 14px;
    background: var(--tk-ink-bg);
    color: var(--tk-on-dark-2);
    box-shadow: var(--tk-shadow-lg);
    transform: rotate(1.5deg);
    transition: transform .25s ease;
}
.tk-kalk:hover .tk-kalk-demo { transform: rotate(0); }
.tk-kalk-demo-tag {
    position: absolute; top: -11px; left: 20px;
    padding: 3px 10px; border-radius: 999px; background: var(--tk-heat); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.tk .tk-kalk-demo p { margin: 0; font-size: 14px; }
.tk .tk-kalk-demo p b { color: #fff; }
.tk .tk-kalk-demo-big { margin: 8px 0 16px; color: #fff; font-size: 22px; font-weight: 800; }
.tk-kalk-demo-big b { font-size: 3.2rem; line-height: 1; letter-spacing: -0.04em; }
.tk-kalk-demo-bar {
    position: relative; height: 10px; margin: 0 0 16px; border-radius: 999px;
    background: linear-gradient(90deg, #2e9d5b 0%, #9bc53d 30%, #f2c230 55%, #f08a24 78%, #d1490f 100%);
}
.tk-kalk-demo-bar span {
    position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
    border-radius: 50%; background: #fff; border: 3px solid var(--tk-ink-bg);
}
@media (prefers-reduced-motion: reduce) { .tk-kalk, .tk-kalk-demo { transition: none; } }
@media (max-width: 900px) {
    .tk-kalk { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 22px; }
    .tk-kalk-demo { transform: none; }
}
@media (max-width: 560px) {
    .tk-kalk-copy { flex-direction: column; gap: 16px; }
    .tk-kalk-ic { width: 84px; height: 84px; }
    .tk-kalk-ic svg { width: 50px; height: 50px; }
}

/* ------------------------------------------------------------ potvrda */
.tk-done {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    display: grid;
    gap: 18px;
    justify-items: center;
}
.tk-done-mark {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: #e2efe7;
    color: #2c6a45;
    display: flex; align-items: center; justify-content: center;
}
.tk-done h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.tk-done .tk-lead { text-align: center; }
.tk-done-card {
    width: 100%;
    text-align: left;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    padding: 24px;
    background: #fff;
}
.tk-done-card h2 { font-size: 1rem; margin-bottom: 12px; }

/* Plutajuci kontakt se sklanja iznad podnozja da ne zaklanja dugmad na dnu. */
.tk-float {
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.tk-float.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
}

/* ================================================ 19. GRUPE I PODGRUPE ------ */
/* mega meni: kolona = grupa + njene podgrupe */
.tk-mega-col { display: flex; flex-direction: column; min-width: 0; }
.tk .tk-mega-group { font-weight: 700; color: var(--tk-ink); }
.tk .tk-mega-sub {
    font-size: 13.5px;
    padding: 6px 10px 6px 22px;
    min-height: 32px;
    color: var(--tk-ink-2);
    position: relative;
}
.tk .tk-mega-sub::before {
    content: "";
    position: absolute;
    left: 10px; top: 50%;
    width: 6px; height: 1px;
    background: var(--tk-ink-3);
}

/* mobilna ladica: podgrupa uvucena */
.tk .tk-drawer-sub a.is-sub { padding-left: 32px; font-size: 14.5px; color: var(--tk-ink-3); }

/* bocna kolona kategorije */
.tk .tk-side-list a.is-sub { padding-left: 26px; font-size: 14px; }

/* plocice podgrupa iznad artikala */
.tk-subcats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.tk .tk-subcats a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--tk-line);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tk-ink);
    background: #fff;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.tk .tk-subcats a:hover { border-color: var(--tk-blue); color: var(--tk-blue); }
.tk-subcats a span {
    font-size: 12px;
    font-weight: 700;
    color: var(--tk-ink-3);
    background: var(--tk-surface);
    border-radius: 999px;
    padding: 1px 7px;
}

/* sifra na kartici i na stranici proizvoda */
.tk-sku {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tk-ink-3);
    font-variant-numeric: tabular-nums;
}
.tk-pdp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--tk-ink-3);
}
.tk-pdp-meta b { color: var(--tk-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================ 20. MOBILNI VID (dorade 09/2026)

   1. Gornja crna traka se na mobilnom ne prikazuje. Telefon i e-mail su ionako
      u ladici i u podnozju, a Viber/WhatsApp lebde preko cijelog sajta; izbor
      jezika je premjesten u ladicu. Time se dobija 88px odmah na vrhu.
   2. Zaglavlje ostaje prilijepljeno pri skrolu (sticky je vec bio postavljen,
      ali ga je `overflow-x: hidden` na html/body ponistavao — vidi vrh fajla).
   5. Podnozje je bilo predugacko: 14 linkova jedan ispod drugog, svaki visok
      44px zbog dodira, davalo je preko 600px samo na linkove. Liste sada idu u
      dvije kolone, pa je podnozje otprilike upola krace, a dodirne mete ostaju.
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .tk-topbar { display: none; }
}

/* izbor jezika u mobilnoj ladici */
.tk-drawer-lang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0 2px;
    border-top: 1px solid var(--tk-line);
    margin-top: 6px;
}
.tk-drawer-lang > span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tk-ink-3);
}
.tk-drawer-lang .tk-lang { display: flex; gap: 8px; }
.tk .tk-drawer-lang .tk-lang a {
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius, 8px);
    font-weight: 600;
    color: var(--tk-ink-2);
}
.tk .tk-drawer-lang .tk-lang a.is-active {
    background: var(--tk-ink);
    border-color: var(--tk-ink);
    color: #fff;
}

/* podnozje na mobilnom: liste u dvije kolone */
@media (max-width: 700px) {
    .tk-footer-main { gap: 26px; padding: 36px 0 30px; }
    .tk-footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 18px;
    }
    .tk-footer h4 { margin-bottom: 10px; }
    .tk .tk-footer-links li a { padding: 9px 0; min-height: 40px; }
    .tk-footer-logo { height: 34px; margin-bottom: 14px; }
    .tk-footer address + address { margin-top: 10px; }
}