/* ===========================================================
   Termo Održavanja, design system (DARK NAVY tema)
   Pozadina: tamno plava. Akcent: električno plava #2E9BFF.
   Foto proizvoda na svijetlim "wellovima" radi čistoće.
   =========================================================== */
:root{
  --navy:#0a2540; --navy-2:#0e2e4d; --navy-3:#13395f; --navy-deep:#07182c;
  --bg:#0a2540; --bg-soft:#0c2c4d; --bg-soft-2:#10355d;
  --surface:#102f54; --surface-2:#163c69;
  --accent:#2e9bff; --accent-600:#1b82e6; --accent-700:#1573d6;
  --blue:#2e9bff; --blue-600:#1b82e6; --blue-700:#1573d6;
  --blue-50:rgba(46,155,255,.14); --blue-100:rgba(46,155,255,.28); --blue-300:#7cc0ff;
  --ink:#e8eef5; --muted:#9fb6cc; --muted-2:#7f96ad;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.07);
  --ok:#23c06f;
  --imgwell:#eef2f6; /* svijetla podloga za foto proizvoda */
  /* sharper, editorial: skoro pravi pravokutnici za sadržaj; pill je pravi pill */
  --radius:3px; --radius-sm:2px; --radius-lg:5px; --radius-pill:999px; --radius-chip:2px;
  --sh-1:0 1px 2px rgba(0,0,0,.25);
  --sh-2:0 8px 24px rgba(0,0,0,.32);
  --sh-3:0 22px 54px rgba(0,0,0,.46);
  --container:1200px;
  --gap:clamp(1rem,3vw,2rem);
  --fs-h1:clamp(2rem,1.2rem + 3.6vw,3.4rem);
  --fs-h2:clamp(1.55rem,1.05rem + 2vw,2.4rem);
  --fs-h3:clamp(1.18rem,1rem + .7vw,1.5rem);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-300);text-decoration:none}
a:hover{color:#a6d4ff}
.brand-logo,.footer-logo,.bt-logo,.mega-title img,.footer-brands img,.mega-bosch,.daikin-mark{object-fit:contain!important;width:auto}
h1,h2,h3,h4{line-height:1.13;letter-spacing:-.027em;margin:0 0 .5em;font-weight:800;color:#fff;font-synthesis:none}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);font-weight:700}
p{margin:0 0 1rem}
.container{width:min(100% - 2.4rem,var(--container));margin-inline:auto}
.section{padding:clamp(3rem,6vw,5.5rem) 0}
.section-tight{padding:clamp(2rem,4vw,3.5rem) 0}
.bg-soft{background:var(--bg-soft)}
.bg-navy{background:linear-gradient(135deg,var(--navy-deep),#0c2c4d)}
[hidden]{display:none!important}
.phone-btns{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.7rem}
.phone-btns .btn{text-align:center;white-space:nowrap}
@media(max-width:560px){.phone-btns{grid-auto-flow:row;gap:.5rem}}
.cat-subgroup + .cat-subgroup{margin-top:clamp(2.4rem,5vw,3.6rem)}
.container.narrow{max-width:820px}
.legal-dl{margin:0 0 2rem;border-top:1px solid var(--line)}
.legal-dl .dl-row{display:grid;grid-template-columns:220px 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line-2)}
.legal-dl dt{color:var(--muted);font-weight:700;font-size:.92rem}
.legal-dl dd{margin:0;color:var(--ink)}
.legal-note{color:var(--muted);font-size:.9rem;margin-top:1.4rem}
.legal-prose h2{margin:1.8rem 0 .6rem;font-size:1.2rem}
.legal-prose p,.legal-prose li{color:var(--ink);line-height:1.7}
.legal-prose ul{margin:.4rem 0 1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem}
.footer-legal{display:flex;gap:1.2rem;flex-wrap:wrap;margin:.3rem 0}
.footer-legal a{color:var(--muted);font-size:.9rem}
.footer-legal a:hover{color:#fff}
@media(max-width:560px){.legal-dl .dl-row{grid-template-columns:1fr;gap:.15rem}}
.ms-note{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);background:var(--surface);padding:clamp(1.2rem,3vw,1.8rem)}
.ms-note-body h2{margin:.2rem 0 .6rem}
.ms-note-body p{color:var(--muted);max-width:70ch;margin:0 0 .7rem}
.ms-note-body .btn{margin-top:.4rem}
.pd-msnote{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);background:var(--surface);padding:1rem 1.1rem;margin-top:1.2rem}
.pd-msnote strong{color:#fff}
.pd-msnote p{color:var(--muted);font-size:.92rem;margin:0 0 .6rem}
.pd-msnote a{color:var(--blue-300);font-weight:700}
/* editorial eyebrow s "kicker" linijom prije teksta (print-magazine signature) */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-300);margin-bottom:.7rem}
.eyebrow::before{content:"";display:inline-block;width:22px;height:2px;background:currentColor;flex:0 0 auto;opacity:.9}
.lead{font-size:1.12rem;color:var(--muted);max-width:62ch}
.section-head{max-width:64ch;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.section-head.center{margin-inline:auto;text-align:center}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy);padding:.6rem 1rem;z-index:200}
.skip-link:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:1rem;line-height:1;
  padding:.92rem 1.5rem;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;transition:transform .12s ease,background .15s ease,box-shadow .15s ease,border-color .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(46,155,255,.32)}
.btn-primary:hover{background:var(--accent-600);color:#fff;box-shadow:0 10px 24px rgba(46,155,255,.4)}
.btn-secondary{background:var(--surface-2);color:#fff;border-color:var(--line)}
.btn-secondary:hover{background:#1d4a7e;color:#fff}
.btn-outline{background:transparent;color:#fff;border-color:var(--line)}
.btn-outline:hover{border-color:var(--accent);color:var(--blue-300)}
.btn-ghost{background:transparent;color:var(--ink);border-color:transparent;padding-inline:.6rem}
.btn-ghost:hover{color:var(--blue-300)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:#eaf2fb;color:var(--blue-700)}
.btn-sm{padding:.6rem 1rem;font-size:.92rem}
.btn-lg{padding:1.05rem 1.8rem;font-size:1.06rem}
.btn-block{width:100%}
.btn-mp{background:var(--surface);color:#fff;border-color:var(--line)}
.btn-mp:hover{border-color:var(--accent);color:var(--blue-300)}
.btn-mp .ext{font-weight:600;font-size:.82rem;color:var(--muted)}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:100;background:linear-gradient(180deg,#0d3056,#0a2440);color:#fff;border-bottom:1px solid rgba(124,192,255,.22)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--accent),#7cc0ff,#ffffff,#7cc0ff,var(--accent));background-size:200% 100%;animation:headerFlow 10s linear infinite}
@keyframes headerFlow{0%{background-position:0 0}100%{background-position:200% 0}}
.header-inner{display:flex;align-items:center;gap:1.2rem;min-height:88px;position:relative}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand-logo{height:52px;width:auto}
@media (max-width:680px){.brand-logo{height:44px}}
.footer-logo{height:38px;width:auto;margin-bottom:1.4rem;display:block}
.primary-nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem}
.nav-list{display:flex;align-items:center;gap:.3rem;list-style:none;margin:0;padding:0}
.nav-list>li{position:relative}
.nav-list>li>a{display:inline-flex;align-items:center;gap:.35rem;color:#e6eef7;font-weight:700;font-size:1.02rem;padding:.7rem .85rem;border-radius:6px;white-space:nowrap}
.nav-list>li>a:hover,.nav-list>li>a[aria-current=page]{color:#fff;background:rgba(255,255,255,.08)}
.caret{width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.7}
.nav-cta{display:flex;align-items:center;gap:1rem}
.nav-phones{display:flex;flex-direction:column;gap:.3rem;line-height:1}
.nav-phone{color:#fff;font-weight:800;font-size:1.08rem;white-space:nowrap;display:flex;align-items:center;gap:.5rem;letter-spacing:.01em}
.nav-phone .np-city{font-size:1rem;font-weight:800;letter-spacing:.03em;color:var(--blue-300);min-width:26px}
.nav-phone:hover{color:var(--blue-300)}
.ph-both-link{font-weight:700;white-space:nowrap}
.ph-both-link b{color:var(--blue-300);font-weight:800}
.ph-sep{opacity:.6;margin:0 .2rem}
.nav-phone:hover{color:var(--blue-300)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.5rem;margin-left:auto;cursor:pointer}
.nav-toggle span{width:26px;height:2px;background:#fff;transition:.25s}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* mega */
.mega{position:absolute;top:calc(100% + 8px);left:0;background:var(--surface);color:var(--ink);border-radius:var(--radius);box-shadow:var(--sh-3);
  padding:1.2rem;display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:1.4rem;min-width:560px;opacity:0;visibility:hidden;transform:translateY(8px);
  /* Grace period (350ms) na zatvaranje — kratak mouseout ne zatvara menu */
  transition:opacity .2s ease .35s,visibility .2s linear .35s,transform .2s ease .35s;border:1px solid var(--line)}
/* Veći nevidljivi bridge (16px) zatvara gap između trigger linka i dropdown-a */
.mega::before{content:"";position:absolute;left:-20px;right:-20px;top:-16px;height:24px;background:transparent;pointer-events:auto}
.mega-sm{grid-template-columns:1fr;min-width:260px}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0);
  /* on open: no delay */
  transition:opacity .18s ease,visibility .18s linear,transform .18s ease}
.mega-col{display:flex;flex-direction:column;gap:.15rem}
.mega-title{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.5rem;min-height:18px;display:flex;align-items:center}
.mega-col a{color:var(--ink);font-weight:600;padding:.42rem .5rem;border-radius:6px;font-size:.96rem}
.mega-col a:hover{background:var(--blue-50);color:var(--blue-300)}
/* cascading products menu */
.mega-products{display:block;min-width:240px;padding:.5rem;grid-template-columns:none}
.mega-brands{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.12rem}
.mb-item{position:relative}
.mb-head{display:flex;align-items:center;gap:.6rem;padding:.72rem .8rem;border-radius:var(--radius-sm);font-weight:700;color:#fff;text-decoration:none}
.mb-head .caret-r{margin-left:auto;width:.46rem;height:.46rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.5}
/* flat item - navigira direktno bez submenu-a (npr. Prijenosne klime) */
.mb-item-flat:hover>.mb-head,.mb-item-flat:focus-within>.mb-head{background:var(--blue-50);color:var(--blue-300)}
.mb-item:hover>.mb-head,.mb-item:focus-within>.mb-head{background:var(--blue-50);color:var(--blue-300)}
.mb-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.mb-dot.daikin{background:var(--accent)}
.mb-dot.bosch{background:#e2384a}
.mega-sub{position:absolute;top:-.5rem;left:calc(100% + .4rem);min-width:280px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-3);padding:.6rem;display:flex;flex-direction:column;gap:.08rem;z-index:5;
  opacity:0;visibility:hidden;transform:translateX(-4px);
  /* Hover-out delay: čeka 350ms prije nego sakrije, da kratak gap u hoveru ne zatvara menu */
  transition:opacity .18s ease .35s,visibility .18s linear .35s,transform .18s ease .35s}
/* Bridge across the .4rem gap so cursor can travel from parent to submenu — sad veći (1.2rem) i pokriva top/bottom */
.mega-sub::before{content:"";position:absolute;left:-1.2rem;top:-.5rem;bottom:-.5rem;width:1.4rem;background:transparent;pointer-events:auto}
/* Drugi bridge: ispod parent stavke da pokriva vertikalni gap */
.mb-item::after{content:"";position:absolute;top:100%;left:0;right:0;height:.5rem;background:transparent;pointer-events:auto;display:none}
.mb-item:hover::after{display:block}
.mb-item:hover>.mega-sub,.mb-item:focus-within>.mega-sub{opacity:1;visibility:visible;transform:translateX(0);
  /* Hover-in je instant, bez delay */
  transition:opacity .15s ease,visibility .15s linear,transform .15s ease}
.mega-sub a{padding:.55rem .65rem;border-radius:var(--radius-sm);color:var(--ink);font-weight:600;font-size:.95rem}
.mega-sub a:hover{background:var(--blue-50);color:var(--blue-300)}
.mega-sub .mega-title{padding:.2rem .65rem;margin-bottom:.2rem}
.mega-div{height:1px;background:var(--line);margin:.35rem .4rem}
.mega-mini{font-size:.88rem!important;color:var(--muted)!important}
.mega-mini:hover{color:var(--blue-300)!important}
.mega-feat{color:var(--blue-300)!important;font-weight:800!important;margin-top:.15rem}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:0;padding:.7rem 0;font-size:.86rem;color:var(--muted)}
.breadcrumbs li+li::before{content:"›";margin-right:.3rem;color:var(--muted-2)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--blue-300)}
.breadcrumbs [aria-current=page] span{color:#fff;font-weight:600}

/* ---------- page hero (navy band) ---------- */
.page-hero{background:linear-gradient(135deg,var(--navy-deep),#123a66);color:#fff;padding:clamp(2.4rem,5vw,3.8rem) 0;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(46,155,255,.22),transparent 70%)}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{color:#fff;max-width:20ch}
.page-hero .lead{color:#c6d6e8}
.page-hero .eyebrow{color:var(--blue-300)}
.ph-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.ph-cta .btn{min-width:auto}
/* NOVO patch na color chips */
.color-chip.is-new{position:relative;padding-right:.9rem;padding-top:1.1rem;display:inline-flex;align-items:center}
.chip-novo{position:absolute;top:-.45rem;right:-.3rem;background:linear-gradient(135deg,#ff6b35,#ff8c42);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.06em;padding:.18rem .42rem;border-radius:999px;text-transform:uppercase;line-height:1;box-shadow:0 2px 6px rgba(255,107,53,.4);z-index:2}
/* Okrugli NOVO patch u kutu slike u galeriji */
.gallery-new-patch{position:absolute;top:1.1rem;right:1.1rem;width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,#ff6b35 0%,#ff8c42 55%,#ff6b35 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;text-align:center;box-shadow:0 8px 22px rgba(255,107,53,.45),inset 0 -3px 8px rgba(0,0,0,.18);transform:rotate(-12deg);z-index:4;border:3px solid #fff;font-family:inherit;animation:gnp-pulse 2.8s ease-in-out infinite}
.gallery-new-patch .gnp-line1{font-size:1.18rem;font-weight:900;letter-spacing:.12em;line-height:1;text-shadow:0 2px 4px rgba(0,0,0,.15)}
.gallery-new-patch .gnp-line2{font-size:.7rem;font-weight:700;letter-spacing:.18em;line-height:1;opacity:.95}
@keyframes gnp-pulse{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(-12deg) scale(1.06)}}
@media (max-width:520px){.gallery-new-patch{width:72px;height:72px;top:.7rem;right:.7rem}.gallery-new-patch .gnp-line1{font-size:.9rem}.gallery-new-patch .gnp-line2{font-size:.55rem}}
/* Feature split — media + content row (homepage rich sections) */
.feature-split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.feature-split.reverse{grid-template-columns:1fr 1.1fr}
.feature-split.reverse .fs-media{order:2}
.fs-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--navy-2);box-shadow:var(--sh-2)}
.fs-media img{width:100%;height:100%;object-fit:cover;display:block}
.fs-content h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:.7rem 0 .8rem;line-height:1.15;color:#fff;letter-spacing:-.01em}
.fs-content .lead{color:var(--muted);font-size:1.04rem;line-height:1.55;margin:0 0 1.3rem}
.fs-points{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-direction:column;gap:.7rem}
.fs-points li{position:relative;padding-left:1.6rem;color:var(--ink);line-height:1.55;font-size:.95rem}
.fs-points li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:800;font-size:1.05rem}
.fs-points strong{color:#fff;font-weight:700}
.fs-cta{display:flex;gap:.7rem;flex-wrap:wrap}
@media (max-width:880px){
  .feature-split,.feature-split.reverse{grid-template-columns:1fr;gap:1.8rem}
  .feature-split.reverse .fs-media{order:0}
}
/* sp-hl-grid: highlights grid u opening sekciji single-product stranice (Tece, Uponor, EcoFloor) */
.sp-hl-grid{margin-top:1rem;gap:1.2rem 2rem}
.sp-hl-item{display:flex;align-items:flex-start;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:0 1px 0 rgba(255,255,255,.02) inset,0 6px 14px -10px rgba(0,0,0,.35)}
.sp-hl-check{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#7cc0ff);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem}
.sp-hl-item p{margin:0;color:var(--ink);line-height:1.5;font-size:.98rem}
.sp-hl-item p strong{color:#fff;font-weight:700}

/* sp-colors: Madoka boje s labelom ispod (single-product page) */
.sp-colors{margin-top:1.6rem;gap:2.4rem}
.sp-color{margin:0;display:flex;flex-direction:column;align-items:center;gap:1.6rem;padding:.4rem 0}
.sp-color-img{position:relative;width:62%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0}
/* Soft blue floor halo ispod Madoke (manji od slike, vidljiv ispod) */
.sp-color-img::after{content:"";position:absolute;left:50%;bottom:8%;width:62%;height:14%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(96,170,255,.75),rgba(96,170,255,.3) 45%,rgba(96,170,255,0) 75%);filter:blur(8px);z-index:0;pointer-events:none}
/* Image: cijela slika bez ikakvog klipanja */
.sp-color-img img{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;display:block;filter:drop-shadow(0 14px 22px rgba(0,0,0,.4))}
.sp-color-label{display:flex;flex-direction:column;align-items:center;gap:.55rem;font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:.18em;text-transform:uppercase}
.sp-color-label::before{content:"";display:block;width:34px;height:2px;background:var(--accent);border-radius:1px}
@media (max-width:640px){
  .sp-color-img{width:60%}
  .sp-color-label{font-size:.95rem;letter-spacing:.14em}
}
/* Stat grid (info na "Zašto dizalica topline" sekciji) */
.stat-grid{margin-top:.5rem}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.4rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.stat-num{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:800;color:var(--blue-300);line-height:1;letter-spacing:-.02em}
.stat-label{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:.5rem}
.stat-card p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0;max-width:34ch}
.page-hero-img{padding:clamp(3.5rem,8vw,6rem) 0;background:var(--navy);min-height:clamp(280px,40vh,420px);display:flex;align-items:center}
.page-hero-img::after{display:none}
.ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ph-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,20,36,.92),rgba(7,20,36,.62) 50%,rgba(7,20,36,.25) 85%,rgba(7,20,36,.1))}
.page-hero-img .container{position:relative;z-index:2}
.ph-logo{display:block;height:30px;width:auto;margin-bottom:1rem;filter:drop-shadow(0 1px 8px rgba(0,0,0,.3))}

/* ---------- hero (home) ---------- */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy)}
.hero-bgs{position:absolute;inset:0;z-index:0}
.hero-bg{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero-bg.active{opacity:1}
.hero-bg picture{position:absolute;inset:0;display:block}
.hero-bg-img{width:100%;height:100%;object-fit:cover;display:block}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,18,33,.9),rgba(6,18,33,.5) 50%,rgba(6,18,33,.2)),linear-gradient(0deg,rgba(6,18,33,.82),rgba(6,18,33,.15) 45%,transparent 65%)}
.hero-overlay{position:relative;z-index:2;padding-top:clamp(4rem,12vh,7rem);padding-bottom:clamp(5rem,12vh,7rem)}
.hero-copy{max-width:56ch}
/* ljubičasti krug — Akcija jesen 2026 (samo na akcijskom slajdu) */
.hero-badge{position:absolute;z-index:4;top:clamp(4.6rem,13vh,7.4rem);right:clamp(1rem,4vw,3.2rem);width:clamp(104px,13vw,150px);height:clamp(104px,13vw,150px);border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 32% 28%,#a855f7,#7c3aed 62%,#6d28d9);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.28);border:2px solid rgba(255,255,255,.35);transform:rotate(-8deg);transition:transform .2s ease}
.hero-badge:hover{transform:rotate(-8deg) scale(1.05)}
.hero-badge-in{display:block;padding:.4rem}
.hero-badge-text{display:block;font-weight:900;line-height:1.08;letter-spacing:.01em;font-size:clamp(.82rem,1.3vw,1.02rem);text-shadow:0 1px 6px rgba(0,0,0,.3)}
@media (max-width:680px){.hero-badge{top:1rem;right:.7rem;width:74px;height:74px}.hero-badge-text{font-size:.62rem}}
.hero h1{font-size:clamp(2.4rem,1.3rem + 4vw,4.2rem);max-width:18ch;color:#fff;margin-bottom:.6rem;line-height:1.03;letter-spacing:-.035em;text-shadow:0 2px 36px rgba(0,0,0,.45)}
.hero-sub{font-size:clamp(1.08rem,1rem + .5vw,1.34rem);color:#e3ecf5;max-width:54ch;margin-bottom:1.8rem;min-height:2.6em;text-shadow:0 1px 20px rgba(0,0,0,.4)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-copy.in h1{animation:heroIn .6s ease both}
.hero-copy.in .hero-sub{animation:heroIn .6s ease .07s both}
.hero-copy.in .hero-actions{animation:heroIn .6s ease .14s both}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-controls{position:absolute;left:0;right:0;bottom:1.5rem;z-index:3;display:flex;align-items:center;justify-content:center;gap:1.1rem}
.hero-dots{display:flex;gap:.5rem;align-items:center}
.hero-dot{width:14px;height:3px;border-radius:2px;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:.25s}
.hero-dot.active{background:#fff;width:30px}
.hero-arrow{background:rgba(255,255,255,.16);border:0;color:#fff;width:40px;height:40px;border-radius:var(--radius-sm);font-size:1.3rem;line-height:1;cursor:pointer;transition:.15s}
.hero-arrow:hover{background:rgba(255,255,255,.32)}

/* ---------- chips / badges ---------- */
.chip{display:inline-flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.08);color:var(--ink);font-weight:700;font-size:.78rem;padding:.28rem .6rem;border-radius:var(--radius-chip);border:1px solid var(--line)}
.chip-energy{background:var(--ok);color:#06231a;border-color:transparent}
.badge{display:inline-flex;align-items:center;gap:.4rem;position:absolute;top:12px;left:12px;background:#fff;color:var(--navy);font-weight:800;font-size:.82rem;padding:.3rem .6rem .3rem .35rem;border-radius:var(--radius-pill);box-shadow:var(--sh-2);z-index:3}
.badge-bestbuy img{width:34px;height:34px;border-radius:50%}
.badge-akcija{background:var(--accent);color:#fff;padding:.32rem .7rem;letter-spacing:.04em;text-transform:uppercase;font-size:.76rem}
.badge-novo{background:#0a2540;color:#fff;padding:.32rem .7rem;letter-spacing:.04em;text-transform:uppercase;font-size:.76rem}
.badge-noveboje{background:#f0820a;color:#fff;padding:.32rem .7rem;letter-spacing:.04em;text-transform:uppercase;font-size:.76rem}
.badge:nth-of-type(2){top:calc(12px + 2.5rem)}

/* ---------- product grid / cards ---------- */
.grid{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.product-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
/* accent stripe na vrhu kartice — pojavi se na hover, oštar designer detalj */
.product-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),#7cc0ff,var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1);z-index:2}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue-100)}
.product-card:hover::before{transform:scaleX(1)}
.pc-link{display:flex;flex-direction:column;flex:1;color:inherit}
.pc-media{position:relative;aspect-ratio:4/3;background:var(--imgwell);display:flex;align-items:center;justify-content:center;padding:.4rem;overflow:hidden}
.pc-media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
/* slike koje imaju vlastitu dizajniranu pozadinu (npr. paket kompoziti) - full-bleed bez multiply blend-a */
.pc-media:has(img[src*="-paket.webp"]){padding:0;background:transparent}
.pc-media img[src*="-paket.webp"]{mix-blend-mode:normal;width:100%;height:100%;object-fit:cover}
.pc-media-brand{background:linear-gradient(150deg,var(--navy-deep),var(--navy-3))}
.brand-bosch.pc-media-brand{background:linear-gradient(150deg,#0b2540,#9c1b2b)}
.pc-brandmark{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:#fff;opacity:.96;text-align:center;padding:0 1rem}
.pc-body{padding:1.1rem 1.2rem 0;display:flex;flex-direction:column;gap:.4rem;flex:1}
.pc-series{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.pc-title{font-size:1.14rem;margin:0;color:#fff}
.pc-tagline{color:var(--muted);font-size:.92rem;margin:0;flex:1}
.pc-meta{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.2rem}
.price{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap;margin-top:.3rem}
.price-label{color:var(--muted);font-size:.85rem}
.price strong{font-size:1.25rem;color:#fff}
.price-vat{font-size:.74rem;color:var(--muted-2)}
.price-on-request{font-weight:800;color:var(--blue-300);font-size:1.05rem}
.pc-cta{padding:.9rem 1.2rem 1.1rem;font-weight:700;color:var(--blue-300);font-size:.94rem}
.product-card:hover .pc-cta{color:#a6d4ff}
/* Prozirni product renderi (klime, omekšivači, paketi, radijatori...) na tamnoplavoj podlozi -
   proizvod (često bijel) puno bolje iskače nego na svijetloj podlozi. Klasu is-navy dodaje img() u templates.js. */
.pc-media:has(img.is-navy),
.cat-hub-media:has(img.is-navy),
.gthumb:has(img.is-navy){padding:.5rem;background:linear-gradient(150deg,#0b2540,#13395f)}
.gallery-main:has(img.is-navy){background:linear-gradient(150deg,#0b2540,#13395f);border-color:transparent}
img.is-navy{object-fit:contain!important;mix-blend-mode:normal!important}
/* radijatori su široki pa popune okvir - malo ih smanji da dobiju zraka na plavoj podlozi */
.pc-media img.is-navy[src*="bosch-hc4000"],
.ak-card-link .ak-card-media img.is-navy[src*="bosch-hc4000"]{width:auto;height:auto;max-width:78%;max-height:78%;margin:auto}
.gallery-main img.is-navy[src*="bosch-hc4000"]{width:auto;height:auto;max-width:80%;max-height:80%;margin:auto}
/* web-shop red gumba na kartici (Dodaj u košaricu + Detalji) */
.pc-shop-row{display:flex;gap:.5rem;padding:.75rem 1.2rem 1.1rem;margin-top:auto}
.pc-shop-row .btn{flex:1;justify-content:center;white-space:nowrap}
.pc-shop-row .btn-sm{padding:.5rem .6rem;font-size:.86rem}

/* ---------- feature/value cards ---------- */
.feature{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;color:var(--ink);transition:border-color .2s ease,transform .2s ease}
/* tanka accent lijeva traka na hover — sharper, more designer */
.feature::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.feature:hover{border-color:rgba(46,155,255,.4);transform:translateY(-2px)}
.feature:hover::before{transform:scaleY(1)}
.feature .ic{width:46px;height:46px;border-radius:3px;background:var(--blue-50);color:var(--blue-300);display:flex;align-items:center;justify-content:center;margin-bottom:.95rem;border:1px solid rgba(46,155,255,.22)}
.ic-svg{width:22px;height:22px;display:block}
.feature h3{font-size:1.1rem;margin-bottom:.35rem;color:#fff}
.feature p{color:var(--muted);font-size:.96rem;margin:0}

/* ---------- split / brand band ---------- */
.brand-band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2rem)}
.brand-band-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.brand-band-4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.brand-band-4{grid-template-columns:1fr}}
.brand-band-5{grid-template-columns:repeat(5,1fr);gap:1rem}
@media (max-width:1100px){.brand-band-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.brand-band-5{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.brand-band-5{grid-template-columns:1fr}}
/* 2+3 stack: Daikin/Bosch gore, Tece/Uponor/EcoFloor dolje */
.brand-band-stack{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.4rem);grid-template-columns:none}
.brand-row{display:grid;gap:clamp(1rem,3vw,2rem)}
.brand-row-2{grid-template-columns:1fr 1fr}
.brand-row-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:780px){.brand-row-2,.brand-row-3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.brand-row-2,.brand-row-3{grid-template-columns:1fr}}
.brand-tile{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:clamp(1.6rem,2.4vw,2.2rem) clamp(1rem,1.6vw,1.6rem);color:#fff;min-height:230px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1rem;border:1px solid var(--line)}
.brand-tile.daikin{background:linear-gradient(135deg,#0a2540,#15568a)}
.brand-tile.bosch{background:linear-gradient(135deg,#0b2540,#9c1f2f)}
.brand-tile.tece{background:linear-gradient(135deg,#1a1a1a,#3a3a3a)}
.brand-tile.uponor{background:linear-gradient(135deg,#0d3a2f,#1a6850)}
.brand-tile.ecofloor{background:linear-gradient(135deg,#3a1a05,#7a3a14)}
.brand-tile img.bt-logo{height:30px;width:auto;margin-bottom:0}
.brand-tile img.bt-logo-lg{height:42px}
/* Uponor logo je tall format (365×200, ~1.8:1), pa treba veću visinu da bude vizualno usporediv sa širim Daikin/Bosch logoima */
.brand-tile.uponor img.bt-logo-lg{height:58px}
.brand-tile h3{color:#fff;font-size:1.5rem;text-align:center}
.brand-tile p{color:rgba(255,255,255,.85);margin:0;max-width:44ch;position:relative;z-index:2}
.brand-tile>img{position:relative;z-index:2}
.brand-tile .btn{align-self:center;position:relative;z-index:2}
/* snake-trace SVG po obrubu kartice na hover */
.bt-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.bt-trace rect{fill:none;stroke:rgba(255,255,255,.9);stroke-width:2.5;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .7s cubic-bezier(.5,.05,.3,1);vector-effect:non-scaling-stroke}
.brand-tile:hover .bt-trace rect,.brand-tile:focus-visible .bt-trace rect{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.bt-trace rect{transition:none}}

/* ---------- best buy band ---------- */
.bestbuy-band{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.2rem);background:linear-gradient(135deg,#0c2c4d,#123a66);border:1px solid rgba(46,155,255,.3);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2rem)}
.bb-badge{width:clamp(72px,12vw,104px);height:auto;flex:0 0 auto;border-radius:50%;box-shadow:var(--sh-2)}
.bb-body{flex:1}
.bb-body h2{color:#fff;margin:.15rem 0 .45rem;font-size:clamp(1.3rem,1rem + 1.4vw,1.95rem)}
.bb-body p{color:#c6d6e8;margin:0;max-width:72ch}
.bestbuy-band .btn{flex:0 0 auto}
@media (max-width:760px){.bestbuy-band{flex-direction:column;text-align:center}.bb-body p{max-width:none}}

/* ---------- editorial catalog (model rows) ---------- */
.model-rows{display:flex;flex-direction:column;gap:clamp(2rem,5vw,4.5rem)}
.model-row{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.model-row.reverse .mr-media{order:2}
.mr-media{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--imgwell);aspect-ratio:4/3;line-height:0}
.mr-media>img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mr-media:hover>img{transform:scale(1.03)}
.mr-media.tall{aspect-ratio:4/5}
.mr-stack{position:absolute;inset:0;display:block}
.mr-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .45s ease}
.mr-frame.active{opacity:1}
.mr-body .eyebrow{margin-bottom:.4rem}
.mr-body h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);margin:0 0 .6rem;color:#fff}
.mr-body p{color:var(--muted);font-size:1.02rem;margin:0 0 1rem;max-width:52ch}
.mr-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.mr-foot{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
@media (max-width:760px){.model-row{grid-template-columns:1fr;gap:1.1rem}.model-row.reverse .mr-media{order:0}.mr-media.tall{aspect-ratio:4/3}}

/* ---------- product detail ---------- */
.pd-hero{padding:clamp(1.6rem,3vw,2.4rem) 0 0}
.pd-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:start}
.gallery{position:sticky;top:90px}
.gallery-main{background:var(--imgwell);border:1px solid var(--line);border-radius:var(--radius-lg);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,3vw,2rem);position:relative;overflow:hidden}
.gallery-main img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
/* slike sa vlastitom pozadinom - full-bleed bez multiply blend-a */
.gallery-main:has(img[src*="-paket.webp"]){padding:0;background:transparent;border-color:transparent}
.gallery-main img[src*="-paket.webp"]{width:100%;height:100%;max-height:none;object-fit:cover;mix-blend-mode:normal}
.gallery-thumbs{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.gthumb{width:74px;height:74px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--imgwell);padding:.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gthumb img{max-height:100%;width:auto;mix-blend-mode:multiply}
.gthumb.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--blue-100)}
/* Galerija strelice za listanje slika */
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid var(--line-2);color:var(--ink-strong, #0a2540);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,transform .15s ease,box-shadow .15s ease;z-index:3;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.gallery-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.gallery-arrow:active{transform:translateY(-50%) scale(.96)}
.gallery-arrow-prev{left:.7rem}
.gallery-arrow-next{right:.7rem}
.gallery-counter{position:absolute;bottom:.7rem;left:50%;transform:translateX(-50%);background:rgba(11,28,55,.72);color:#fff;font-size:.78rem;letter-spacing:.04em;padding:.3rem .65rem;border-radius:999px;z-index:3;pointer-events:none;font-variant-numeric:tabular-nums}
@media (max-width:520px){.gallery-arrow{width:36px;height:36px}.gallery-arrow-prev{left:.4rem}.gallery-arrow-next{right:.4rem}}
.pd-info .pd-brand{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.pd-info h1{margin:.3rem 0 .5rem}
.pd-tagline{font-size:1.1rem;color:var(--muted);margin-bottom:1rem}
.pd-price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:1.2rem}
.pd-price .price strong{font-size:1.9rem}
.pd-colors{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.2rem}
.pd-colors-label{font-weight:700;color:var(--muted);font-size:.86rem}
.color-chip{font:inherit;font-weight:700;font-size:.82rem;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);padding:.34rem .7rem;border-radius:var(--radius-chip);cursor:pointer;transition:.14s}
.color-chip:hover{border-color:var(--accent);color:#fff}
.color-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pd-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem}
.pd-keyspecs{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:1.4rem 0}
.keyspec{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8rem 1rem}
.keyspec .k{font-size:.76rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.keyspec .vv{font-size:1.05rem;font-weight:800;color:#fff}
.pd-note{font-size:.84rem;color:var(--muted);background:var(--blue-50);border-radius:var(--radius-sm);padding:.7rem .9rem;margin-top:.6rem}
.highlights{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.highlights li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink)}
.highlights li::before{content:"✓";color:var(--ok);font-weight:900;flex:0 0 auto}

/* ---------- remote band (product) ---------- */
.remote-band{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(1.4rem,4vw,3rem);align-items:center}
.remote-img{background:linear-gradient(160deg,#0e3157,#0a2540);border:1px solid var(--line);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;padding:1.6rem;aspect-ratio:3/4}
.remote-img img{max-height:400px;width:auto;object-fit:contain}
.remote-img.remote-light{background:var(--imgwell)}
.remote-img.remote-ph{flex-direction:column;gap:.9rem;border-style:dashed;border-color:rgba(255,255,255,.22)}
.remote-ph-ic{color:var(--blue-300)}
.remote-ph-ic .ic-svg{width:54px;height:54px}
.remote-ph-txt{font-size:.86rem;text-align:center;line-height:1.45;color:var(--muted)}
.remote-ph-txt em{display:block;color:var(--muted-2);font-style:normal;font-size:.78rem;margin-top:.2rem}
.remote-body h2{margin:.1rem 0 .6rem}
.remote-body p{color:var(--muted);max-width:54ch;margin:0 0 1rem}
@media (max-width:760px){.remote-band{grid-template-columns:1fr;text-align:center}.remote-img{max-width:280px;margin-inline:auto;aspect-ratio:4/5}.remote-body .highlights{display:inline-grid;text-align:left}}

/* ---------- spec / price table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table.spec{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
table.spec th,table.spec td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line-2);color:var(--ink)}
table.spec thead th{background:var(--navy-deep);color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.02em}
table.spec tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
table.spec tbody th{font-weight:700;color:#fff}
table.price-table{width:100%;border-collapse:collapse;font-size:.96rem;min-width:540px}
table.price-table th,table.price-table td{padding:.85rem 1rem;border-bottom:1px solid var(--line-2);text-align:left;color:var(--ink)}
table.price-table thead th{background:var(--surface-2);color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}
table.price-table td.model{font-weight:700;color:#fff}
table.price-table td.pr{font-weight:800;color:#fff;white-space:nowrap}
table.price-table td.pr-reg{font-weight:600;color:var(--muted);opacity:.85}
table.price-table td.pr-akc{color:#7cc0ff}
.tbl-akcija{display:inline-block;background:var(--accent);color:#fff;font-weight:800;letter-spacing:.03em;text-transform:uppercase;font-size:.62rem;padding:.12rem .4rem;border-radius:var(--radius-sm);vertical-align:middle;margin-right:.35rem}
table.price-table td.act{text-align:right;white-space:nowrap}
.promo-banner{display:flex;align-items:center;gap:.7rem;background:linear-gradient(90deg,rgba(124,192,255,.14),rgba(124,192,255,.04));border:1px solid var(--blue-100);border-radius:var(--radius);padding:.65rem .85rem;margin:0 0 1rem;font-size:.92rem;color:#fff;flex-wrap:wrap}
.promo-banner .promo-tag{display:inline-flex;align-items:center;background:var(--accent);color:#001530;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;padding:.25rem .55rem;border-radius:var(--radius-sm)}
.tbl-mp{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;font-size:.86rem;color:#fff;border:1px solid var(--line);padding:.4rem .7rem;border-radius:var(--radius-sm)}
.tbl-mp:hover{border-color:var(--accent);color:var(--blue-300)}
.tbl-add{display:inline-flex;align-items:center;gap:.3rem;font-weight:800;font-size:.84rem;color:#fff;background:var(--accent);border:0;cursor:pointer;padding:.45rem .85rem;border-radius:var(--radius-sm);white-space:nowrap;transition:background .15s}
.tbl-add:hover{background:var(--accent-600)}
.tbl-add.added{background:#1f9d57}
.tbl-add-cell{margin-top:.4rem;display:flex;width:100%;justify-content:center;font-size:.78rem;padding:.32rem .5rem}
.tbl-upit{display:inline-flex;align-items:center;font-weight:700;font-size:.84rem;color:var(--blue-300);border:1px solid var(--line);padding:.4rem .7rem;border-radius:var(--radius-sm)}
.tbl-upit:hover{border-color:var(--accent);color:#fff}
table.price-table-matrix td.pr{white-space:normal;vertical-align:top;text-align:center}

/* ---------- nav cart ---------- */
.nav-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;background:transparent;border:1px solid rgba(124,192,255,.32);border-radius:var(--radius-pill);color:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.nav-cart:hover{border-color:var(--accent);background:rgba(46,155,255,.12)}
.nav-cart-count{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;background:#ff6b35;color:#fff;font-size:.68rem;font-weight:800;border-radius:999px;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 2px 6px rgba(255,107,53,.5)}

/* ---------- cart drawer ---------- */
.cart-backdrop{position:fixed;inset:0;background:rgba(6,20,38,.55);z-index:300;opacity:0;transition:opacity .25s}
.cart-backdrop.show{opacity:1}
.cart-drawer{position:fixed;top:0;right:0;height:100%;width:min(480px,100%);background:var(--navy);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.4);z-index:301;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);color:var(--ink)}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line)}
.cart-head h2{margin:0;font-size:1.15rem;color:#fff}
.cart-close{background:transparent;border:0;color:var(--muted);font-size:1.8rem;line-height:1;cursor:pointer;padding:0 .2rem}
.cart-close:hover{color:#fff}
.cart-body{flex:1;overflow-y:auto;padding:1.1rem 1.3rem}
.cart-empty{color:var(--muted);font-size:.95rem}
.cart-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.cart-item{border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;background:var(--surface)}
.ci-main strong{display:block;color:#fff;font-size:1.05rem;line-height:1.3}
.ci-variant{display:block;color:var(--muted);font-size:.9rem;margin-top:.25rem}
.ci-row{display:flex;align-items:center;gap:.8rem;margin-top:.9rem}
.ci-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-pill);overflow:hidden}
.ci-qty button{background:transparent;border:0;color:#fff;width:28px;height:28px;font-size:1.1rem;cursor:pointer;line-height:1}
.ci-qty button:hover{background:var(--surface-2)}
.ci-q{min-width:28px;text-align:center;font-weight:700;color:#fff;font-size:.98rem}
.ci-price{margin-left:auto;font-weight:800;color:#7cc0ff;white-space:nowrap;font-size:1.02rem}
.ci-remove{background:transparent;border:0;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 .1rem}
.ci-remove:hover{color:#ff6b35}
.cart-foot{border-top:1px solid var(--line);padding:.8rem 1.3rem 1rem;background:var(--navy-deep)}
.cart-total{display:flex;align-items:center;justify-content:space-between;font-size:1rem;margin-bottom:.6rem}
.cart-total span{color:var(--muted)}
.cart-total strong{color:#fff;font-size:1.25rem}
.cart-note{color:var(--muted-2);font-size:.76rem;line-height:1.35;margin:.35rem 0 0}
.cart-form{display:flex;flex-direction:column;gap:.5rem}
.cart-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.cart-form label{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--muted);font-weight:600}
.cart-form input,.cart-form select,.cart-form textarea{width:100%;padding:.45rem .6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);color:#fff;font:inherit;font-size:.9rem}
.cart-form textarea{resize:vertical;min-height:2.6rem}
.cart-form .hp{display:none}
.cart-send{width:100%;justify-content:center;margin-top:.15rem}
.cart-form .form-status{font-size:.85rem;padding:.5rem 0}
.cart-form .form-status.ok{color:#5fd18a}
.cart-form .form-status.err{color:#ff8a6b}
@media(max-width:560px){.cart-form .form-row{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{display:grid;gap:.7rem;max-width:820px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-weight:700;color:#fff;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--blue-300);font-weight:400;line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-answer{padding:0 1.2rem 1.1rem;color:var(--muted)}
.faq-answer p{margin:0}

/* ---------- cta band ---------- */
.cta-band{background:linear-gradient(135deg,#0c2c4d,#143f70);color:#fff;border:1px solid rgba(46,155,255,.3);border-radius:var(--radius-lg);padding:clamp(1.8rem,4vw,3rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem}
.cta-band h2{color:#fff;margin:0}
.cta-band p{color:#c6d6e8;margin:.3rem 0 0;max-width:46ch}
.cta-band .cta-actions{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- multi-split banner ---------- */
.ms-banner{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;align-items:stretch;transition:transform .16s ease,box-shadow .16s ease,border-color .16s;color:inherit}
.ms-banner:hover{border-color:var(--blue-100);box-shadow:var(--sh-2)}
.ms-banner-media{background:var(--imgwell);display:flex;align-items:center;justify-content:center;padding:1.4rem}
.ms-banner-media img{max-height:260px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.ms-banner-body{padding:clamp(1.4rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center}
.ms-banner-body h2{margin:.1rem 0 .4rem}
.ms-banner-body p{color:var(--muted);margin:0 0 1.1rem;max-width:48ch}
.ms-banner-body .btn{align-self:flex-start}

/* ---------- related ---------- */
.related .grid-3{margin-top:1rem}

/* ---------- forms ---------- */
.inquiry-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.2rem,3vw,1.8rem);box-shadow:var(--sh-1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.inquiry-form label{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.9rem;color:var(--ink)}
.form-full{margin-bottom:1rem}
.inquiry-form input,.inquiry-form select,.inquiry-form textarea{font:inherit;font-size:.98rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);font-weight:400}
.inquiry-form input::placeholder,.inquiry-form textarea::placeholder{color:var(--muted-2)}
.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--blue-100)}
.inquiry-form select option{color:#111}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:.4rem}
.form-note{font-size:.8rem;color:var(--muted-2);margin:.8rem 0 0}
.form-status{margin-top:.8rem;font-weight:600}
.form-status.ok{color:var(--ok)}
.form-status.err{color:#ff8a6b}

/* ================ KONTAKT HERO (full-viewport s logo watermarks) ================ */
.kontakt-hero{position:relative;background:linear-gradient(135deg,#08213b 0%,#0d3564 60%,#123f77 100%);color:#fff;overflow:hidden;padding:clamp(4rem,10vw,7rem) 0 clamp(5rem,10vw,7rem);min-height:min(88vh,900px);display:flex;align-items:center}
.kontakt-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 30%,rgba(46,155,255,.22),transparent 55%),radial-gradient(ellipse at 80% 70%,rgba(46,155,255,.15),transparent 60%);pointer-events:none}
.kontakt-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
.kh-wm{filter:brightness(0) invert(1);opacity:.06;user-select:none;width:min(78vw,900px);height:auto;max-width:none}
.kontakt-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2.4rem,5vw,4.5rem);align-items:center}
.kontakt-hero-copy .eyebrow{color:var(--blue-300);letter-spacing:.18em;font-size:.82rem;font-weight:800;text-transform:uppercase}
.kontakt-hero-copy h1{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.05;margin:.7rem 0 1.2rem;color:#fff;letter-spacing:-.02em}
.kontakt-hero-copy .lead{color:#cddaea;font-size:1.08rem;line-height:1.55;max-width:44ch;margin-bottom:2rem}
.kontakt-quick{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}
.kontakt-quick li{display:flex;flex-direction:column;gap:.2rem}
.kontakt-quick .kq-label{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-300)}
.kontakt-quick a,.kontakt-quick li{color:#fff;font-size:1.15rem;font-weight:700;text-decoration:none}
.kontakt-quick a:hover{color:var(--blue-300)}
/* Forma kartica - glassmorphism (frosted glass sa suptilnim plavim tintom) */
.kontakt-hero-form{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(120,180,255,.08));backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:0 30px 60px -20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15);color:#fff}
.kontakt-hero-form .inquiry-form{background:transparent;border:0;padding:0;box-shadow:none}
.kontakt-hero-form .inquiry-form label{color:#cddaea}
.kontakt-hero-form .inquiry-form input,.kontakt-hero-form .inquiry-form select,.kontakt-hero-form .inquiry-form textarea{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.16)}
.kontakt-hero-form .inquiry-form input::placeholder,.kontakt-hero-form .inquiry-form textarea::placeholder{color:rgba(255,255,255,.42)}
.kontakt-hero-form .inquiry-form input:focus,.kontakt-hero-form .inquiry-form select:focus,.kontakt-hero-form .inquiry-form textarea:focus{background:rgba(255,255,255,.16);border-color:var(--blue-300);box-shadow:0 0 0 3px rgba(46,155,255,.22)}
.kontakt-hero-form .inquiry-form select option{color:#0a2540;background:#fff}
.kontakt-hero-form .form-note{color:rgba(205,218,234,.75)}
.kontakt-hero-form .form-actions .btn.btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.kontakt-hero-form .form-actions .btn.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
@media (max-width:900px){
  .kontakt-hero{min-height:auto;padding:3.4rem 0 3rem}
  .kontakt-hero-inner{grid-template-columns:1fr;gap:2.4rem}
  .kh-wm{width:min(92vw,520px);opacity:.05}
}

/* ---------- locations ---------- */
.loc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.loc-map{aspect-ratio:16/10;width:100%;border:0;background:var(--bg-soft);display:block}
.loc-map-lg{aspect-ratio:4/3;min-height:380px}
.map-facade{aspect-ratio:16/10;width:100%;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;cursor:pointer;
  background:linear-gradient(135deg,#1a3c63,#10355d);color:#fff;position:relative;text-align:center;padding:1rem}
.map-facade .mf-ic{color:var(--blue-300)}
.map-facade .mf-ic .ic-svg{width:30px;height:30px}
.map-facade .mf-city{font-weight:800;font-size:1.05rem}
.map-facade .mf-btn{font-weight:700;font-size:.9rem;color:#fff;background:var(--accent);padding:.5rem 1rem;border-radius:var(--radius-pill)}
.map-facade:hover .mf-btn{background:var(--accent-600)}
.loc-body{padding:1.3rem}
.loc-body h3{margin-bottom:.4rem}
.loc-list{list-style:none;padding:0;margin:.6rem 0 1rem;display:grid;gap:.45rem;color:var(--muted)}
.loc-list strong{color:#fff}

/* ---------- blog ---------- */
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.post-card:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:var(--blue-100)}
.post-card .pcb{padding:1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post-card .pmeta{font-size:.8rem;color:var(--muted-2)}
.post-card h3{font-size:1.15rem;margin:0;color:#fff}
.post-card p{color:var(--muted);font-size:.94rem;margin:0;flex:1}
.article{max-width:760px;margin-inline:auto}
.article p{font-size:1.06rem;line-height:1.75;color:var(--ink)}
.article h2{margin-top:2rem;color:#fff}
.article ul{padding-left:1.2rem;color:var(--ink)}
.article li{margin-bottom:.5rem}
.prose-cta{background:var(--blue-50);border-left:4px solid var(--accent);border-radius:var(--radius-sm);padding:1.1rem 1.3rem;margin:1.6rem 0}

/* ---------- mobile sticky cta ---------- */
.mobile-cta{display:none}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:#c6d6e8;border-top:2px solid;border-image:linear-gradient(90deg,var(--accent),#7cc0ff) 1}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem);padding:clamp(2.4rem,5vw,4rem) 0 2rem}
.footer-brand p{color:#9fb3c8;font-size:.94rem;max-width:38ch}
.footer-brand strong{color:#fff}
.footer-brands{display:flex;align-items:center;gap:1.4rem;margin-top:1rem}
.footer-brands img{height:26px;width:auto}
.footer-bosch{height:34px}
.footer-bestbuy{display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;color:#bcd0e6}
.footer-bestbuy img{width:46px;height:46px;flex:0 0 auto;border-radius:50%}
.footer-bestbuy span{font-size:.78rem;font-weight:700;line-height:1.25;color:#cfe0f0}
.footer-bestbuy:hover span{color:#fff}
.footer-col h3{color:#fff;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.9rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.footer-col a{color:#bcd0e6;font-size:.94rem}
.footer-col a:hover{color:#fff}
/* SEO "Popularne pretrage" band - long-tail keyword linkovi za organic search */
.footer-seo-band{border-top:1px solid rgba(255,255,255,.1);padding:1.2rem 0 1.4rem;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:baseline}
.footer-seo-band .fs-label{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8ba3ba;flex:0 0 auto}
.footer-seo-band .fs-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.footer-seo-band .fs-tags a{display:inline-block;padding:.3rem .65rem;border:1px solid rgba(255,255,255,.14);border-radius:99px;font-size:.78rem;color:#b8c8dc;text-decoration:none;transition:.18s ease}
.footer-seo-band .fs-tags a:hover{background:rgba(46,155,255,.12);border-color:rgba(46,155,255,.4);color:#fff}
.footer-pay{border-top:1px solid rgba(255,255,255,.1)}
.footer-pay-inner{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem 1.2rem;padding:1.1rem 0}
.fp-label{font-weight:700;color:#fff;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.fp-marks{display:flex;gap:.5rem}
.pay-tile{display:inline-flex;width:42px;height:25px}
.pay-tile svg{width:100%;height:100%;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.fp-text{color:#9fb3c8;font-size:.85rem;margin-left:auto}
@media (max-width:680px){.footer-pay-inner{justify-content:center;text-align:center}.fp-text{margin-left:0;width:100%}}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;padding:1.1rem 0;font-size:.82rem;color:#8ba3ba}
.footer-disclaimer{margin:0}

/* ---------- usp strip ---------- */
.usp{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.usp .u{padding:.4rem}
.usp .un{font-size:1.7rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.usp .ul{font-size:.86rem;color:var(--muted);font-weight:600}

/* ---------- misc ---------- */
.center{text-align:center}
.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mb-0{margin-bottom:0}
.divider{height:1px;background:var(--line);border:0;margin:0}
.tier-pill{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .5rem;border-radius:var(--radius-chip);background:var(--blue-50);color:var(--blue-300)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .mega{min-width:520px}
}
@media (max-width:880px){
  body{font-size:16px}
  .nav-toggle{display:flex}
  .primary-nav{position:fixed;inset:76px 0 0 auto;width:min(86vw,360px);background:var(--navy-deep);flex-direction:column;align-items:stretch;gap:0;padding:1rem 1.1rem 6rem;transform:translateX(105%);transition:transform .26s ease;overflow-y:auto;box-shadow:-12px 0 40px rgba(0,0,0,.45);margin-left:0}
  .primary-nav.open{transform:translateX(0)}
  .nav-list{flex-direction:column;align-items:stretch;gap:.1rem;width:100%}
  .nav-list>li>a{padding:.85rem .6rem;font-size:1.05rem;justify-content:space-between;border-radius:6px}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;display:none;grid-template-columns:1fr;min-width:0;padding:.2rem 0 .6rem .8rem;gap:.3rem}
  .has-mega.open .mega{display:grid}
  .mega-col a{color:#cfe0f0}
  .mega-col a:hover{background:rgba(255,255,255,.08);color:#fff}
  .mega-title{color:#7fa3c5}
  .caret{transition:transform .2s}
  .has-mega.open .caret{transform:rotate(225deg)}
  /* cascading menu, mobile accordion */
  .mega-products{display:none;padding:.2rem 0 .4rem .4rem}
  .has-products.open .mega-products{display:block}
  .mega-brands{gap:0}
  .mb-item{position:static}
  .mb-head{color:#dce7f3;padding:.7rem .6rem}
  .mb-item:hover>.mb-head{background:rgba(255,255,255,.06);color:#fff}
  .mb-head .caret-r{transition:transform .2s}
  .mb-item.open .mb-head .caret-r{transform:rotate(45deg)}
  .mega-sub{position:static;display:none;background:transparent;border:0;box-shadow:none;padding:.1rem 0 .4rem 1rem;min-width:0}
  .mb-item.open>.mega-sub{display:flex}
  .mega-sub .mega-title{color:#7fa3c5}
  .mega-mini{color:#9fb6cc!important}
  .mega-feat{color:var(--blue-300)!important}
  .nav-cta{flex-direction:column;align-items:stretch;gap:.7rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12)}
  .nav-phones{flex-direction:column;align-items:center;gap:.5rem}
  .nav-phone{justify-content:center;font-size:1.05rem}
  .nav-cta .btn{width:100%}
  .hero-overlay{text-align:center}
  .hero-copy{max-width:none}
  .hero h1,.hero-sub{margin-inline:auto}
  .hero-actions{justify-content:center}
  .pd-grid{grid-template-columns:1fr}
  .gallery{position:static}
  .brand-band{grid-template-columns:1fr}
  .ms-banner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .mobile-cta{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:0;position:fixed;bottom:0;left:0;right:0;z-index:90;box-shadow:0 -6px 20px rgba(0,0,0,.4)}
  .mcta{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.95rem .4rem;font-weight:800;color:#fff;font-size:.95rem}
  .mcta-call{background:var(--surface-2)}
  .mcta-call:nth-of-type(2){background:var(--surface);border-left:1px solid rgba(255,255,255,.1)}
  .mcta-ico{width:17px;height:17px;flex:0 0 auto;opacity:.9}
  .mcta-quote{background:var(--accent)}
  body{padding-bottom:56px}
}
@media (max-width:680px){
  /* hero: tekst podignut od dna */
  .hero{min-height:80vh}
  .hero-overlay{padding-bottom:clamp(6rem,20vh,11rem)}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .usp{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .pd-keyspecs{grid-template-columns:1fr 1fr}
  .pd-cta-row{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}

  /* mobile: sve centrirano (tekst i asseti) */
  .section-head{text-align:center;margin-inline:auto}
  .lead{margin-inline:auto}
  .feature{text-align:center}
  .feature .ic{margin-inline:auto}
  .pc-body{text-align:center;align-items:center}
  .pc-meta,.price{justify-content:center}
  .pc-cta{text-align:center}
  .pd-info{text-align:center}
  .pd-brand{display:block}
  .pd-price,.pd-colors,.pd-keyspecs{justify-content:center}
  .pd-colors{justify-content:center}
  .gallery-thumbs{justify-content:center}
  .highlights li{justify-content:center;text-align:left}
  .cta-band{flex-direction:column;align-items:center;text-align:center}
  .cta-band .cta-actions{justify-content:center;width:100%}
  .brand-tile{align-items:center;text-align:center}
  .brand-tile .btn{align-self:center}
  .post-card .pcb{text-align:center}
  .loc-body{text-align:center}
  .loc-list{justify-items:center}
  .article{text-align:center}
  .article p,.article ul,.article li{text-align:left}
  .prose-cta{text-align:left}
  .form-actions{justify-content:center}
}
@media (max-width:430px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .pc-media{aspect-ratio:16/10}
  /* paket slike su 4:3 kompoziti s vlastitom pozadinom - ne cropati na mobile */
  .pc-media:has(img[src*="-paket.webp"]){aspect-ratio:4/3}
}
/* ============================ MULTI-SPLIT CONFIGURATOR ============================ */
.ms-config{padding:2.4rem 0}
.ms-config-head{text-align:center;margin-bottom:2rem}
.ms-config-head h2{margin:.6rem 0 1.1rem}
.ms-count{display:inline-flex;gap:.25rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.3rem;flex-wrap:wrap;justify-content:center}
.ms-count-btn{background:transparent;border:0;padding:.6rem 1.1rem;border-radius:999px;font-weight:700;color:var(--ink);cursor:pointer;font-size:.95rem;font-family:inherit;transition:background .15s, color .15s}
.ms-count-btn:hover{background:var(--blue-50);color:var(--blue-300)}
.ms-count-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 10px rgba(46,155,255,.35)}

.ms-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:1.6rem;margin-top:1.6rem;align-items:start}
@media(max-width:980px){.ms-grid{grid-template-columns:1fr}}

.ms-house{background:linear-gradient(180deg,rgba(46,155,255,.06),rgba(46,155,255,.01));border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;position:sticky;top:5rem}
.ms-house-svg{width:100%;height:auto;display:block;max-height:440px}
.ms-house-svg .ms-house-roof{fill:#16304f;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.ms-house-svg .ms-house-wall{fill:#0f2540;stroke:var(--accent);stroke-width:2}
.ms-house-svg .ms-house-door{fill:#081a30;stroke:#4e7aa4;stroke-width:1.5}
.ms-house-svg .ms-house-window{fill:#1b3a5f;stroke:#7fc0ff;stroke-width:1.2}
.ms-house-svg .ms-pipe{stroke:#3a6fa3;stroke-width:1.6;fill:none;stroke-linecap:round;transition:stroke .25s,opacity .25s}
.ms-house-svg .ms-pipe-manifold,.ms-house-svg .ms-pipe-trunk{stroke:var(--accent);stroke-width:2}
.ms-room{transition:opacity .25s}
.ms-room .ms-room-bg{fill:#0a2540;stroke:#4e7aa4;stroke-width:1.6;transition:fill .25s,stroke .25s}
.ms-room .ms-room-num{fill:#90b3d7;font-weight:800;font-size:14px;text-anchor:middle;font-family:inherit;transition:fill .2s}
.ms-room .ms-pipe-drop{stroke:#3a6fa3}
.ms-room.active{opacity:1}
.ms-room.active .ms-room-bg{stroke:var(--accent);fill:#193a60}
.ms-room.active .ms-room-num{fill:#fff}
.ms-room.active .ms-pipe-drop{stroke:var(--accent);stroke-width:2}
.ms-room.filled .ms-room-bg{fill:var(--accent);stroke:#7fc0ff}
.ms-room.filled .ms-room-num{fill:#fff}
.ms-room:not(.active){opacity:.25}
.ms-room:not(.active) .ms-pipe-drop{opacity:.3}
.ms-outdoor-box{fill:#193a60;stroke:var(--accent);stroke-width:2}
.ms-outdoor-grille{stroke:#7fc0ff;stroke-width:1.1}
.ms-outdoor-bracket{fill:#0f2540;stroke:#4e7aa4;stroke-width:1.5}
.ms-outdoor-text{fill:#9fc4ec;font-size:11px;text-anchor:middle;font-family:inherit;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.ms-outdoor-tag{fill:#fff;font-weight:900;font-size:14px;text-anchor:middle;font-family:inherit}
.ms-outdoor-ring{fill:none;stroke:#7fc0ff;stroke-width:1.5;stroke-dasharray:4 4;opacity:.7}

.ms-pickers h3{font-size:1.18rem;margin:0 0 1rem;color:#fff}
.ms-slots{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.2rem}
.ms-slot{display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.55rem .7rem;transition:opacity .2s,background .2s,border-color .2s}
.ms-slot-num{width:30px;height:30px;border-radius:50%;background:rgba(46,155,255,.16);color:var(--blue-300);font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:.95rem}
.ms-slot.disabled{opacity:.32}
.ms-slot.disabled .ms-slot-pick,.ms-slot.disabled .ms-slot-series,.ms-slot.disabled .ms-slot-size{pointer-events:none}
.ms-slot-pick,.ms-slot-series,.ms-slot-size{background:var(--bg);color:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.55rem .7rem;font-size:.95rem;font-family:inherit;cursor:pointer}
.ms-slot-pick{flex:1}
.ms-slot-selects{flex:1;display:flex;gap:.5rem}
.ms-slot-series{flex:1 1 60%}
.ms-slot-size{flex:1 1 40%;min-width:92px}
.ms-slot-size:disabled{opacity:.5;cursor:not-allowed}
.ms-slot-pick:focus,.ms-slot-series:focus,.ms-slot-size:focus{outline:2px solid var(--accent);outline-offset:1px}
@media(max-width:520px){.ms-slot-selects{flex-direction:column}}
.ms-setup{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:1.8rem 6rem;margin-top:1.2rem;text-align:center}
.ms-setup-col{display:flex;flex-direction:column;align-items:center;text-align:center}
.ms-setup-label{display:block;font-size:.8rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--blue-300);margin-bottom:.7rem}
.ms-outdoor-select{width:100%;min-width:280px;max-width:380px;background:var(--bg);color:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .8rem;font-size:1rem;font-family:inherit;font-weight:700;cursor:pointer;text-align:left}
.ms-outdoor-select:focus{outline:2px solid var(--accent);outline-offset:1px}
.ms-outdoor-hint{color:var(--muted);font-size:.83rem;margin:.6rem auto 0;max-width:44ch;text-align:center}
@media(min-width:721px){.ms-setup-col:first-child{transform:translateX(-1.4rem)}}
.ms-slot.filled{background:rgba(46,155,255,.08);border-color:rgba(46,155,255,.4)}
.ms-slot.filled .ms-slot-num{background:var(--accent);color:#fff}

.ms-summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem}
.ms-summary-head{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--line)}
.ms-summary-head .eyebrow{display:block;font-size:.66rem;margin-bottom:.25rem}
.ms-summary-head strong{display:block;color:#fff;font-size:1.02rem;line-height:1.2}
.ms-summary-head .ms-outdoor-sub{display:block;color:var(--muted-2);font-size:.83rem;margin-top:.15rem}
.ms-summary-head .ms-indoor-count{display:block;font-size:1.6rem;font-weight:900;color:var(--accent);line-height:1}
.ms-summary-list{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.35rem;font-size:.95rem}
.ms-summary-list li{padding:.5rem .7rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);color:#dce7f3}
.ms-summary-list li.ms-empty{color:var(--muted);font-style:italic;text-align:center;background:transparent;border-style:dashed}
.ms-cta{display:block;text-align:center;width:100%}

@media(max-width:880px){
  .ms-house{position:static}
  .ms-count{width:100%;justify-content:stretch}
  .ms-count-btn{flex:1;padding:.55rem .4rem;font-size:.88rem}
}

/* configurator-to-form context badge (set by ?proizvod= URL param) */
.form-context-badge{background:linear-gradient(135deg,rgba(46,155,255,.16),rgba(46,155,255,.05));border:1px solid rgba(46,155,255,.42);border-radius:var(--radius-sm);padding:.75rem .9rem;margin:0 0 1rem;display:flex;flex-direction:column;gap:.2rem}
.form-context-badge .fcb-eyebrow{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-300)}
.form-context-badge strong{color:#fff;font-weight:700;font-size:.95rem;line-height:1.35;word-break:break-word}

/* ============================ REVIEWS MARQUEE (home trust band) ============================ */
.reviews-section{padding:2.6rem 0 2.2rem;background:linear-gradient(180deg,rgba(46,155,255,.06) 0%,rgba(10,37,64,0) 70%)}
.reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.4rem;margin-bottom:1.5rem;flex-wrap:wrap}
.reviews-head h2{margin:.3rem 0 0;font-size:clamp(1.4rem,2.3vw,1.85rem)}
.reviews-aggregate{display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.55rem .95rem;flex-wrap:wrap}
.reviews-stars-lg{color:#ffb84d;letter-spacing:2px;font-size:1.05rem;line-height:1}
.reviews-aggregate strong{color:#fff;font-weight:800;font-size:1rem}
.reviews-aggregate .reviews-count{color:var(--muted-2);font-size:.86rem}
.reviews-aggregate .reviews-link{color:var(--blue-300);font-weight:700;font-size:.85rem;margin-left:.3rem;text-decoration:none}
.reviews-aggregate .reviews-link:hover{color:#a6d4ff}

.reviews-marquee{position:relative;overflow:hidden;
  /* fade edges so cards smoothly enter/exit */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.reviews-track{display:flex;gap:1.1rem;width:max-content;padding:.2rem 0;animation:reviewsScroll 60s linear infinite;will-change:transform}
.reviews-marquee:hover .reviews-track,
.reviews-marquee:focus-within .reviews-track{animation-play-state:paused}
@keyframes reviewsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.review-card{flex:0 0 320px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.2rem;display:flex;flex-direction:column;gap:.65rem;min-height:200px;box-shadow:0 1px 0 rgba(255,255,255,.02) inset,0 8px 18px -10px rgba(0,0,0,.45)}
.review-card:hover{border-color:rgba(46,155,255,.4)}
.review-stars{color:#ffb84d;letter-spacing:3px;font-size:1rem;line-height:1}
.review-quote{color:#dce7f3;font-size:.95rem;line-height:1.55;flex:1;margin:0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.review-quote::before{content:"\201C";color:var(--blue-300);font-size:1.5rem;line-height:0;margin-right:.1rem;vertical-align:-.25rem;font-family:Georgia,serif}
.review-footer{display:flex;align-items:center;gap:.7rem;padding-top:.65rem;border-top:1px solid var(--line)}
.review-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#7cc0ff);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:.8rem;letter-spacing:.05em;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.review-who{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.review-author{color:#fff;font-size:.92rem;line-height:1.2;font-weight:700}
.review-meta{color:var(--muted-2);font-size:.76rem}

@media (max-width:680px){
  .reviews-head{flex-direction:column;align-items:flex-start}
  .review-card{flex-basis:280px;min-height:180px}
  .reviews-track{animation-duration:50s}
}

@media (prefers-reduced-motion:reduce){
  .reviews-track{animation:none!important;transform:none!important;flex-wrap:wrap;width:auto}
  .reviews-marquee{mask-image:none;-webkit-mask-image:none}
}

/* Logos marquee - homepage brand band, rotira u suprotnom smjeru od reviewa */
.logos-section{padding-top:.4rem;padding-bottom:1.6rem}
.logos-caption{text-align:center;color:var(--muted-2);font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:0 0 1.2rem}
.logos-marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.logos-track{display:flex;align-items:center;gap:3.2rem;width:max-content;padding:.6rem 0;animation:logosScroll 45s linear infinite;will-change:transform}
.logos-marquee:hover .logos-track{animation-play-state:paused}
/* Suprotan smjer od reviewa (reviewsScroll ide 0 → -50%, logosScroll ide -50% → 0) */
@keyframes logosScroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.logo-cell{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:120px;opacity:.78;transition:opacity .25s ease}
.logo-cell:hover{opacity:1}
.logo-cell img{height:36px;width:auto;max-width:160px;object-fit:contain;filter:grayscale(.2) brightness(1.05)}
/* Zehnder logo je viseg aspekta (1.76:1) pa ga vizualno blago povecamo */
.logo-cell img[alt="Zehnder"]{height:42px}
@media (max-width:680px){
  .logos-track{gap:2.2rem;animation-duration:38s}
  .logo-cell img{height:28px;max-width:120px}
}
@media (prefers-reduced-motion:reduce){
  .logos-track{animation:none!important;transform:none!important;flex-wrap:wrap;width:auto;justify-content:center;gap:2rem}
  .logos-marquee{mask-image:none;-webkit-mask-image:none}
}

/* Nested mega-sub: omogućuje 3-razinski cascade (Daikin → Dizalice topline → Split → Niskotemp/Visokotemp) */
.mb-item-nested{position:relative}
.mb-head-sub{display:flex;align-items:center;gap:.6rem;padding:.55rem .65rem;border-radius:var(--radius-sm);color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none}
.mb-head-sub .caret-r{margin-left:auto;width:.42rem;height:.42rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.5}
.mb-item-nested:hover>.mb-head-sub,.mb-item-nested:focus-within>.mb-head-sub{background:var(--blue-50);color:var(--blue-300)}
.mb-item-nested:hover>.mb-head-sub .caret-r{opacity:1}
/* L2 i L3 mega-subs nasljeđuju default .mega-sub stil — pozicionirane su uz desni rub roditelja preko mb-item position:relative */

/* ============================ KATEGORIJA — HUB KARTICE (dizalice topline silos) ============================ */
.cat-hub-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:880px;margin:0 auto}
.cat-hub-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;text-decoration:none;position:relative}
.cat-hub-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),#7cc0ff,var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1);z-index:2}
.cat-hub-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue-100)}
.cat-hub-card:hover::before{transform:scaleX(1)}
.cat-hub-media{height:180px;background:var(--imgwell);display:flex;align-items:center;justify-content:center;padding:1rem}
.cat-hub-media img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.cat-hub-media-empty{background:linear-gradient(135deg,var(--navy-2),var(--navy-3))}
.cat-hub-media-logo{background:linear-gradient(135deg,var(--navy-2),var(--navy-3));padding:1.4rem !important}
.cat-hub-media-logo img{max-width:70%;max-height:60%;width:auto;height:auto;object-fit:contain;mix-blend-mode:normal !important;filter:none !important;transform:none !important}
/* Uponor logo (tall, 1.8:1) — povećaj max visinu da bude vizualno usporediv */
.cat-hub-media-logo img[src*="uponor"]{max-height:80%;max-width:55%}
.ph-logo[src*="uponor"]{height:46px}
/* Footer — flex wrap layout, brendovi se ravnomjerno raspoređuju */
.footer-brands{display:flex !important;flex-wrap:wrap;gap:1.1rem 1.4rem;align-items:center;justify-content:flex-start;max-width:360px}
.footer-brands img{height:30px !important;width:auto !important;max-width:100%;object-fit:contain}
.footer-brands img[src*="tece"]{height:24px !important}
.footer-brands img[src*="uponor"]{height:32px !important}
/* Katalozi grid */
.katalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.2rem}
.katalog-card{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1.4rem 1.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:inherit;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.katalog-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue-100)}
.katalog-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--blue-50),rgba(124,192,255,.15));color:var(--blue-300);margin-bottom:.2rem}
.katalog-cat{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.2rem}
.katalog-title{font-size:1.05rem;margin:0;color:#fff;line-height:1.3}
.katalog-desc{font-size:.86rem;color:var(--muted);line-height:1.5;margin:0;flex:1}
.katalog-meta{font-size:.74rem;color:var(--muted-2);font-weight:700;letter-spacing:.04em}
.katalog-btn{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;padding:.5rem .85rem;background:var(--accent);color:#001530;font-weight:700;font-size:.86rem;border-radius:var(--radius-sm);align-self:flex-start;transition:background .15s ease}
.katalog-card:hover .katalog-btn{background:var(--accent-700);color:#fff}
.katalog-brand-head{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.8rem !important;text-align:left !important}
.katalog-brand-logo{height:36px;width:auto}
.cat-hub-body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1;text-align:center;align-items:center;justify-content:center}
.cat-hub-body h3{font-size:1.08rem;margin:0;color:#fff;line-height:1.25;letter-spacing:-.005em}
.cat-hub-body p{font-size:.86rem;color:var(--muted);margin:0;line-height:1.45;max-width:32ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-hub-body .pc-cta{font-size:.86rem;margin-top:.1rem}
.cat-hub-products{margin-top:2.2rem;padding-top:2rem;border-top:1px solid var(--line)}
.cat-hub-products-head{text-align:center;margin-bottom:1.4rem}
.cat-hub-products-head h2{font-size:1.45rem;margin:0 0 .35rem;color:#fff}
.cat-hub-products-head p{color:var(--muted);margin:0;font-size:.92rem}
/* Design banner s lifestyle slikom u kategoriji */
.cat-design-banner{position:relative;overflow:hidden;background:#0a1320;min-height:340px;display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.cat-design-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.cat-design-bg img{width:100%;height:100%;object-fit:cover;display:block}
.cat-design-overlay{position:relative;z-index:1;width:100%;background:linear-gradient(90deg,rgba(7,18,38,.92) 0%,rgba(7,18,38,.78) 45%,rgba(7,18,38,.4) 75%,rgba(7,18,38,.15) 100%);display:flex;align-items:center;padding:3rem 0}
.cat-design-content{max-width:48rem}
.cat-design-content h2{font-size:clamp(1.6rem,3.4vw,2.3rem);color:#fff;line-height:1.15;margin:0 0 .65rem;letter-spacing:-.01em}
.cat-design-content p{color:rgba(232,242,255,.92);font-size:1.02rem;line-height:1.55;margin:0 0 1.4rem;max-width:42rem}
@media (max-width:780px){
  .cat-design-banner{min-height:280px}
  .cat-design-overlay{background:linear-gradient(180deg,rgba(7,18,38,.35) 0%,rgba(7,18,38,.85) 55%,rgba(7,18,38,.95) 100%);padding:6rem 0 2rem;align-items:flex-end}
  .cat-design-content p{font-size:.95rem}
}

/* ============================ KATEGORIJA — GRUPIRANJE PO SUBCATEGORY ============================ */
.cat-group{margin-bottom:2.4rem}
.cat-group:last-child{margin-bottom:0}
.cat-group-title{margin-bottom:1.1rem;display:flex;align-items:center;gap:.7rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.cat-group-title .eyebrow{margin-bottom:0;font-size:.85rem}

/* ============================ OUTDOOR UNIT SECTION (Altherma split) ============================ */
.outdoor-section{background:linear-gradient(180deg,rgba(46,155,255,.04),transparent 60%);padding:2rem 0}
.ou-head{display:grid;grid-template-columns:1fr auto;gap:1.6rem;align-items:center;margin-bottom:1.4rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.ou-head h2{font-size:clamp(1.25rem,1rem + 1vw,1.6rem);margin:.35rem 0 0;color:#fff;line-height:1.3}
.ou-image{background:var(--imgwell);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem;width:200px;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.ou-image img{max-width:100%;max-height:100%;width:auto;height:auto;mix-blend-mode:multiply}
.ou-group{margin-bottom:1.4rem}
.ou-group:last-child{margin-bottom:0}
.ou-group-title{font-size:.95rem;font-weight:800;color:var(--blue-300);margin:0 0 .6rem;padding-left:.6rem;border-left:3px solid var(--accent)}
.ou-table{width:100%}
.ou-table th{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);background:var(--surface);text-align:left;padding:.6rem .8rem}
.ou-table th.pr{text-align:right}
.ou-table td{padding:.65rem .8rem;font-size:.92rem;border-top:1px solid var(--line)}
.ou-table td.model{font-weight:700;color:#fff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.86rem}
.ou-table td.pr{text-align:right;color:var(--accent);font-weight:800;white-space:nowrap}
.ou-note{font-size:.82rem;color:var(--muted-2);margin:1rem 0 0;font-style:italic}
@media(max-width:680px){.ou-head{grid-template-columns:1fr;text-align:center}.ou-image{margin:0 auto}}

/* ============================ FUNKCIJE I KARAKTERISTIKE (Daikin Comfort 365 katalog) ============================ */
.features-section{padding:2.2rem 0}
.features-section .section-head{margin-bottom:1.6rem}
.feat-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.feat-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;position:relative}
.feat-group::before{content:"";position:absolute;left:-1px;top:14px;width:3px;height:36px;background:var(--accent);border-radius:0 3px 3px 0}
.feat-cat{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-300);margin:0 0 1rem;padding-left:.1rem}
.feat-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}
.feat-item{display:flex;align-items:center;gap:.8rem;color:#e8eef5;font-size:.95rem;line-height:1.4;font-weight:600}
/* jaci kontrast: bijela ikona na accent badge-u s tankim ringom + glow */
.feat-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent),#1573d6);color:#fff;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 4px 10px rgba(46,155,255,.28)}
.feat-ic .ic-svg{width:22px;height:22px;stroke-width:1.9}

/* hero akcije — niži profil + line-clamp na h1/sub (uvijek 2 reda) + kružne strelice */
/* +13% više vertikalnog prostora po user requestu */
.hero-akcije{min-height:min(66vh,610px)}
.hero-akcije .hero-overlay{padding-top:clamp(3rem,8vh,5rem);padding-bottom:clamp(2.2rem,4.5vh,3.4rem)}
/* line-clamp jamči da i naslov i sub uvijek imaju isti broj redova → identičan layout slajdova */
.hero-akcije h1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.06em;font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);margin-bottom:.55rem}
.hero-akcije .hero-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.2em;margin-bottom:1.3rem}

/* navigacija — strelice + točkice u istom redu, čitljivo i intuitivno */
.hero-nav-akcije{display:flex;align-items:center;gap:1rem;margin-top:1.2rem}
.hero-arrow-mini{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.32);color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;padding-bottom:.18rem;transition:background .18s,border-color .18s,transform .15s}
.hero-arrow-mini:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.hero-arrow-mini:active{transform:scale(.96)}
.hero-dots-akcije{display:flex;gap:.55rem;align-items:center}
.hero-dots-akcije .hero-dot{width:28px;height:3px;border-radius:2px;border:0;background:rgba(255,255,255,.35);cursor:pointer;padding:0;transition:background .25s,width .25s}
.hero-dots-akcije .hero-dot:hover{background:rgba(255,255,255,.6)}
.hero-dots-akcije .hero-dot.active{background:#fff;width:42px}
@media (max-width:680px){
  .hero-akcije{min-height:min(56vh,460px)}
  .hero-nav-akcije{margin-top:1rem;gap:.7rem}
  .hero-arrow-mini{width:34px;height:34px;font-size:1.2rem}
}

/* hero-tag — accent pill iznad H1 u akcije hero rotaciji */
.hero-tag{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:.42rem .8rem;border-radius:var(--radius-sm);margin-bottom:.9rem;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.hero-tag-akcija{background:linear-gradient(135deg,#ff6b3d,#e64a1f)}
.hero-tag-novost{background:linear-gradient(135deg,var(--accent),var(--accent-700))}
.hero-tag.hide{display:none}
/* Default hero-tag (kad nema tipa) — narančasti NOVO */
.hero-tag:not([class*="hero-tag-"]):not(:empty){background:linear-gradient(135deg,#ff6b35,#ff8c42)}

/* ============================ AKCIJE I NOVOSTI ============================ */
/* meni link s pulsirajućom točkicom da privuče oko */
.nav-akcije{display:inline-flex;align-items:center;gap:.5rem}
.nav-akcije-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff6b3d;box-shadow:0 0 0 0 rgba(255,107,61,.7);animation:akPulse 2.2s ease-out infinite}
@keyframes akPulse{0%{box-shadow:0 0 0 0 rgba(255,107,61,.55)}70%{box-shadow:0 0 0 8px rgba(255,107,61,0)}100%{box-shadow:0 0 0 0 rgba(255,107,61,0)}}

.ak-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;text-decoration:none}
.ak-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue-100);color:var(--ink)}
.ak-card-media{position:relative;aspect-ratio:16/10;background:var(--imgwell);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ak-card-media img{width:100%;height:100%;object-fit:cover}
.ak-card-body{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.45rem}
.ak-card-body .pmeta{font-size:.78rem;color:var(--muted-2);font-weight:600}
.ak-card-body h3{font-size:1.12rem;margin:.1rem 0 .25rem;color:#fff;line-height:1.25}
.ak-card-body p{font-size:.92rem;color:var(--muted);margin:0;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* Novost: "izdvajamo" kartice s proizvodima (slika + link) */
.ak-cards{margin:1.4rem 0 1.8rem}
.ak-card-link{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ak-card-link:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue-100)}
.ak-card-link .ak-card-media{aspect-ratio:4/3;background:var(--imgwell);padding:.6rem}
.ak-card-link .ak-card-media img{object-fit:contain;mix-blend-mode:multiply}
.ak-card-link .ak-card-media:has(img.is-navy){background:linear-gradient(150deg,#0b2540,#13395f)}
.ak-card-link .ak-card-body{gap:.35rem}
.ak-card-link h3{font-size:1.08rem;margin:0;color:#fff;line-height:1.25}
.ak-card-price{font-weight:800;color:var(--blue-300);font-size:1rem}
.ak-card-link .pc-cta{padding:0}

/* tags */
.ak-tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .55rem;border-radius:var(--radius-sm);box-shadow:var(--sh-1)}
.ak-tag-akcija{background:#ff6b3d;color:#fff}
.ak-tag-novost{background:var(--accent);color:#fff}
.ak-tag-expired{background:#3a4a5d;color:#cfd9e4}
.ak-card-media .ak-tag{position:absolute;top:12px;left:12px;z-index:2}
.ak-card-media .ak-tag-expired{top:auto;bottom:12px;left:auto;right:12px}

/* article detail */
.ak-article{max-width:780px;margin:0 auto}
.ak-tags-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.6rem}
.ak-tags-row .pmeta{color:var(--muted-2);font-size:.85rem;font-weight:600}
.ak-figure{margin:1.5rem 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--imgwell)}
.ak-figure img{width:100%;height:auto;display:block}
.ak-validity{margin:1.2rem 0;padding:.9rem 1.1rem;background:linear-gradient(135deg,rgba(255,107,61,.18),rgba(255,107,61,.05));border:1px solid rgba(255,107,61,.45);border-radius:var(--radius-sm);color:#fff;font-weight:700;font-size:.95rem}
.ak-validity strong{color:#ffb38d}
.ak-validity-expired{background:rgba(120,135,150,.14);border-color:rgba(160,175,190,.3);color:var(--muted)}
.ak-validity-expired strong{color:#cfd9e4}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}