:root{ --brand:#E11D2D; --brand-2:#B51220; --bg:#080c11; --panel:#0c1117; --border:rgba(255,255,255,.12); --text:#e9eef5; --muted:#aeb7c2; --wrap:1200px; --shadow:0 12px 30px rgba(0,0,0,.35); }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.wrap{width:var(--wrap);max-width:100%;margin:0 auto;padding:0 16px}
a{color:var(--text);text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);font-weight:800;box-shadow:var(--shadow)}
.btn.primary{background:var(--brand);border-color:transparent;color:#061018}
.section{padding:56px 0}
h1,h2{font:800 clamp(28px,4vw,44px)/1.15 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:.2em 0 .35em;text-align:center}
.intro{color:var(--muted);text-align:center;max-width:72ch;margin:0 auto 24px}
.ticks{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}
.ticks li{padding-left:22px;position:relative}
.ticks li:before{content:"✓";position:absolute;left:0;top:0;color:var(--brand)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(6,10,15,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex;align-items:center;gap:16px;padding:12px 0}
.nav.desktop{display:flex;gap:16px}
.burger.mobile{display:none;border:1px solid var(--border);background:rgba(255,255,255,.06);padding:8px 10px;border-radius:10px;color:var(--text)}
@media (max-width:860px){.nav.desktop,.btn.desktop{display:none}.burger.mobile{display:inline-flex}}
.mobile-panel{position:fixed;inset:0 0 0 auto;width:min(86vw,380px);background:#0a0f14;border-left:1px solid var(--border);transform:translateX(100%);transition:.25s;z-index:9999}
.mobile-panel.open{transform:translateX(0)} .mobile-panel .panel-inner{padding:18px 16px}
.mobile-panel .close{float:right;border:1px solid var(--border);background:rgba(255,255,255,.06);padding:8px 10px;border-radius:10px;color:#fff}
.mnav{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.hero{position:relative;overflow:hidden;padding:46px 0 24px;background:radial-gradient(900px 500px at 70% 110%, rgba(225,29,45,.16), transparent 60%), linear-gradient(180deg,#070b10,#090f15)}
.hero-inner{position:relative;z-index:2}
.kicker{color:var(--muted);text-align:center;letter-spacing:.15em;text-transform:uppercase;font:700 12px/1;margin-bottom:6px}
.accent{color:var(--brand)}
.hero-art{position:relative;height:min(56vw,520px);max-height:520px; margin-top:6px}
.hero-art .poster{position:absolute;left:50%;top:0;transform:translateX(-50%) translateY(10px) scale(1.02) rotate(-1deg);height:100%;width:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));animation:posterIn 1100ms cubic-bezier(.2,.95,.2,1) both 60ms}
@keyframes posterIn{0%{opacity:0;transform:translateX(-50%) translateY(40px) scale(.98) rotate(-2deg)}100%{opacity:1;transform:translateX(-50%) translateY(10px) scale(1.02) rotate(-1deg)}}
.two-col{display:grid;gap:24px;grid-template-columns:1fr 1fr;align-items:center}
@media (max-width:960px){.two-col{grid-template-columns:1fr}}
.two-col .media img{width:100%;height:auto;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.tiles{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-top:18px}
@media (max-width:960px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;height:200px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#0c1117;box-shadow:0 12px 30px rgba(0,0,0,.35);background-image:var(--bg);background-size:cover;background-position:center}
.tile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.6))}
.tile .title{position:absolute;left:12px;right:12px;bottom:10px;color:#fff;font-weight:900;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.cards{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr;align-items:stretch}
@media (max-width:960px){.cards{grid-template-columns:1fr}}
.card{border:1px solid var(--border);border-radius:16px;background:#0c1117;box-shadow:0 12px 30px rgba(0,0,0,.35);padding:22px;display:flex;flex-direction:column;gap:14px}
.card.dark{background:linear-gradient(180deg,#121823,#0b1016)}
.card .title{font:800 20px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.card .price{font:900 26px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--brand)}
.card .hr{height:1px;background:var(--border);margin:8px 0;opacity:.8}
.card ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.card ul li{padding-left:22px;position:relative}
.card ul li:before{content:"✓";position:absolute;left:0;top:0;color:var(--brand)}
.card .cta{margin-top:auto} .card .btn{width:100%;justify-content:center}
#ponuka form .grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){#ponuka form .grid{grid-template-columns:1fr}}
#ponuka input,#ponuka select,#ponuka textarea,#kontakt input,#kontakt select,#kontakt textarea{width:100%;padding:12px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:12px;color:var(--text)}
.chk{display:flex;gap:8px;align-items:center;margin:10px 0;color:var(--text)}
.file-ui{display:flex;gap:10px;align-items:center;margin:6px 0 12px}
.file-ui input[type=file]{display:none}
.file-ui .file-name{color:var(--muted);font-size:.9rem}
#ponuka .actions, #kontakt .actions{display:flex;gap:10px}
.map-wrap{min-height:300px}
.map{width:100%;height:300px;border:0;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.site-footer{padding:24px 0;border-top:1px solid var(--border);background:rgba(255,255,255,.03)}
.site-footer .wrap{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.site-footer .links{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;display:none;z-index:3000}
#toast .box{background:#0c1117;color:#e9eef5;border:1px solid rgba(255,255,255,.2);padding:12px 16px;border-radius:12px;font-weight:800;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* --- IPB-electro style pricing --- */
.pricing-note{color:var(--muted);text-align:center;margin-top:-6px;margin-bottom:18px}
.c-sec{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#0c1117,#0a0f14);box-shadow:var(--shadow)}
.c-head{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer}
.c-head .dot{width:10px;height:10px;border-radius:50%;background:var(--brand)}
.c-head h3{font:900 18px/1.2 system-ui,Arial,sans-serif;margin:0}
.c-head .sub{color:var(--muted);font-size:.95rem;margin-left:auto}
.c-body{padding:0}
.c-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px dashed rgba(255,255,255,.12)}
.c-row:last-child{border-bottom:0}
.c-row .label{color:var(--text)}
.c-row .price{font-weight:800;color:#eaeef6;white-space:nowrap}
.c-row.muted .label{color:var(--muted)}
.c-sec.collapsed .c-body{display:none}
.price-toolbar{display:flex;gap:10px;justify-content:center;align-items:center;margin:10px 0 18px}
.price-toolbar input[type=search]{width:min(560px,100%);padding:12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text)}
.price-toolbar .hint{color:var(--muted);font-size:.9rem}

/* === Refined ipbelectro-like price list === */
.c-sec{border-radius:12px;background:#0c1117;border:1px solid var(--border);overflow:hidden}
.c-head{background:linear-gradient(180deg, rgba(225,29,45,.12), rgba(225,29,45,.06)); border-bottom:1px solid var(--border); padding:14px 16px; display:flex; align-items:center; gap:12px; cursor:pointer}
.c-head .dot{display:none}
.c-head h3{font-weight:900; letter-spacing:.2px; margin:0}
.c-head .sub{margin-left:auto; color:var(--muted); font-size:.95rem}
.c-body{padding:0}
.c-row{display:flex; gap:10px; align-items:center; padding:10px 14px; border-bottom:1px dashed rgba(255,255,255,.14)}
.c-row:nth-child(2n){background:rgba(255,255,255,.02)}
.c-row:last-child{border-bottom:0}
.c-row .label{display:flex; align-items:center; width:100%; color:#e8edf6; position:relative}
.c-row .label:after{content:""; flex:1 1 auto; border-bottom:1px dotted rgba(255,255,255,.25); margin:0 10px; transform:translateY(2px)}
.c-row .price{flex:0 0 auto; min-width:140px; text-align:right; font-weight:900; color:#fff; letter-spacing:.1px}
@media (max-width:720px){
  .c-row{flex-wrap:wrap}
  .c-row .label:after{display:none}
  .c-row .price{width:100%; text-align:left; opacity:.9; margin-top:2px}
}
.price-toolbar{margin:8px 0 16px}
.price-toolbar input[type=search]{border-radius:10px}
.pricing-note{margin-top:2px}


/* === IPB 'card grid' pricing (like screenshot) === */
.price-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1200px){ .price-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){  .price-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){  .price-grid{grid-template-columns:1fr;} }

.pcard{
  background:#0c1117; border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow); overflow:hidden;
  display:flex; flex-direction:column;
}
.pcard .pc-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  background:linear-gradient(180deg,rgba(225,29,45,.12),rgba(225,29,45,.06));
  border-bottom:1px solid var(--border);
}
.pcard .pc-ico{font-size:18px; line-height:1}
.pcard .pc-title{font:900 16px/1.15 system-ui,Arial,sans-serif}
.pcard .pc-sub{margin-left:auto; color:var(--muted); font-size:.95rem}

.pcard .pc-body{padding:10px 0}
.p-row{
  display:grid; grid-template-columns:1fr auto;
  gap:10px; align-items:start;
  padding:12px 16px; position:relative;
}
.p-row + .p-row{border-top:1px dashed rgba(255,255,255,.12)}
.p-row .label{color:#e8edf6}
.p-row .val{display:flex; align-items:baseline; gap:6px; white-space:nowrap}
.p-row .price{font-weight:900; color:#fff; letter-spacing:.1px}
.p-row .unit{color:var(--muted); font-size:.92rem}

@media (max-width:600px){
  .p-row{grid-template-columns:1fr}
  .p-row .val{justify-content:flex-start}
}

.price-toolbar{display:flex;gap:10px;justify-content:center;align-items:center;margin:8px 0 16px}
.price-toolbar input[type=search]{width:min(560px,100%);padding:12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text)}
.pricing-note{color:var(--muted);text-align:center;margin:2px 0 18px}


/* === HERO BACKGROUND ROTÁTOR (bez zmeny HTML štruktúry) === */
.has-hero-rotator{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.has-hero-rotator .hb-slide{
  position:absolute; inset:0;
  background-size:cover;
  background-position:60% center;
  opacity:0;
  transform:scale(1.02);
  transition:opacity 1.9s ease;
  z-index:-3;
}
.has-hero-rotator .hb-slide.is-active{
  opacity:1;
  animation:hb-kenburns 12s ease-in-out both;
}
.has-hero-rotator .hb-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.15) 100%);
  z-index:-2;
}
.has-hero-rotator .hb-edge{
  position:absolute; inset:0;
  background:radial-gradient(1200px 500px at -10% 20%, rgba(255,59,59,0.35), transparent 55%);
  mix-blend-mode:screen; pointer-events:none; z-index:-1;
}

@keyframes hb-kenburns{
  0%{ transform:scale(1.02) translateX(0) }
  100%{ transform:scale(1.8) translateX(-0.8%) }
}

@media (max-width: 900px){
  .has-hero-rotator .hb-slide{ background-position:70% center; }
}
@media (max-width: 520px){
  .has-hero-rotator .hb-slide{ background-position:78% center; }
}

/* Rešpektuj prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .has-hero-rotator *{ animation:none !important; transition:none !important }
}



/* Force-hide any SVGs inside the hero root to keep the photo clean */
.has-hero-rotator svg { display: none !important; }
[data-hero-root] svg { display: none !important; }
.hero svg { display: none !important; } /* only affects svgs inside elements with class hero */


/* === HERO pevná minimálna výška (bez SVG) === */
.has-hero-rotator,
[data-hero-root]{
  min-height: clamp(560px, 78vh, 960px);
  display: grid;
  align-items: center;
  position: relative;
}
@media (max-width: 900px){
  .has-hero-rotator,
  [data-hero-root]{ min-height: 64vh; }
}
@media (max-width: 520px){
  .has-hero-rotator,
  [data-hero-root]{ min-height: 56vh; }
}



/* extra spacing for very tall hero to avoid overlap under sticky header */
.has-hero-rotator .container, [data-hero-root] .container {
  padding-top: min(5vh, 48px);
  padding-bottom: min(4vh, 40px);
}



/* === Fullscreen hero (bez spodnej medzery) === */
.has-hero-rotator,
[data-hero-root]{
  min-height: calc(100dvh - var(--headerH, 72px));
}
/* Zruš prípadnú medzeru medzi hero a ďalšou sekciou */
.has-hero-rotator + *,
[data-hero-root] + *{
  margin-top: 0 !important;
}



/* === Animated sticky header & logo === */
header, .site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: saturate(1.2) blur(6px);
  transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
  background: linear-gradient(180deg, rgba(15,18,22,0.86), rgba(15,18,22,0.72));
}
.animated-header.is-scrolled{
  background: rgba(15,18,22,0.92);
  box-shadow: 0 8px 24px rgba(0,0,0,.32);
}
.site-logo{ display:block; height:48px; width:auto; object-fit:contain; }
.animated-header.is-scrolled .site-logo{ height:42px; transition:height .2s ease; }

/* nav link underline animation */
.nav a, nav a{
  position: relative;
}
.nav a::after, nav a::after{
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0%;
  background: #ff3b3b; transition: width .18s ease;
}
.nav a:hover::after, nav a:focus-visible::after,
nav a:hover::after, nav a:focus-visible::after{ width: 100%; }



/* === Logo v H1 a roh hero === */
.brand-inline img{
  height:56px; width:auto; vertical-align:middle; transform:translateY(-4px);
}
@media (max-width: 900px){
  .brand-inline img{ height:48px; transform:translateY(-2px) }
}
@media (max-width: 520px){
  .brand-inline img{ height:40px; transform:none }
}

/* Logo v ľavom hornom rohu hero */
.hero-corner-logo{
  position:absolute; left: clamp(12px, 3vw, 24px); top: clamp(12px, 3vw, 24px);
  z-index: 2; display:block; opacity:.96; transition:opacity .2s ease, transform .2s ease;
}
.hero-corner-logo:hover{ opacity:1; transform:translateY(-1px) }
.hero-corner-logo img{ height:42px; width:auto; display:block; }
@media (max-width: 520px){
  .hero-corner-logo img{ height:34px }
}



/* === Swapped branding === */
.site-logo-left{ height:28px; width:auto; display:block; object-fit:contain; }
.site-logo-link{ font-weight:700; color: var(--text, #e9edf3); text-decoration:none; }
.site-logo-link:hover{ opacity:.9 }

/* Keep hero inline logo comfy baseline */
.brand-inline img{ height:56px; width:auto; vertical-align:middle; transform:translateY(-4px); }
@media (max-width: 900px){ .brand-inline img{ height:48px } }
@media (max-width: 520px){ .brand-inline img{ height:40px; transform:none } }



/* Exact spec tuning */
.site-logo-left{ height:28px; width:auto; display:block; object-fit:contain; }
.site-logo-link{ font-weight:700; color: var(--text, #e9edf3); text-decoration:none; }
.site-logo-link:hover{ opacity:.9 }



/* === Header: bigger logo & right-aligned nav === */
header{
  display:flex;
  align-items:center;
  gap:12px;
}
/* common inner container patterns */
header .container,
header .wrap,
header .inner{
  display:flex;
  align-items:center;
  width:100%;
  gap:18px;
}
/* Ensure there's a flex context even if no container */
header > *:first-child{ flex:1 1 auto; display:flex; align-items:center; gap:12px; }

/* push nav/menu group to the right */
header a:first-of-type ~ nav,
header a:first-of-type ~ ul,
header a:first-of-type ~ div.menu,
header a:first-of-type ~ .nav,
header a:first-of-type ~ .menu{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:20px;
}

/* bigger left logo */
.site-logo-left{ height:36px; width:auto; display:block; object-fit:contain; }
@media (max-width: 900px){
  .site-logo-left{ height:32px; }
}
@media (max-width: 520px){
  .site-logo-left{ height:28px; }
}



/* === Bigger header logo with left inset === */
header{ padding-left: clamp(18px, 3vw, 28px); padding-right: clamp(18px, 3vw, 28px); }
.site-logo-left{ height:44px; width:auto; }
@media (max-width: 900px){ .site-logo-left{ height:40px } }
@media (max-width: 520px){ .site-logo-left{ height:34px } }



/* === XL header logo variant === */
header{ padding-left: clamp(20px, 4vw, 36px); padding-right: clamp(20px, 4vw, 36px); }
.site-logo-left{ height:58px; width:auto; }
@media (max-width: 1100px){ .site-logo-left{ height:54px } }
@media (max-width: 900px){ .site-logo-left{ height:50px } }
@media (max-width: 700px){ .site-logo-left{ height:44px } }
@media (max-width: 520px){ .site-logo-left{ height:40px } }

/* keep nav to the right and vertically centered even with taller logo */
header{ display:flex; align-items:center; }
header a:first-of-type ~ nav,
header a:first-of-type ~ ul,
header a:first-of-type ~ .nav,
header a:first-of-type ~ .menu,
header a:first-of-type ~ div.menu{ margin-left:auto; display:flex; align-items:center; gap:22px; }

/* avoid wrapping when space is tight */
@media (max-width: 980px){
  header a:first-of-type ~ nav ul,
  header a:first-of-type ~ ul{ gap:14px; }
}



/* === Smooth hero transitions & effects === */
.has-hero-rotator .hb-slide{
  transition: opacity 1.2s cubic-bezier(.22,.61,.36,1), filter 1.2s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1);
  filter: brightness(.92) saturate(1.05) blur(.25px);
}
.has-hero-rotator .hb-slide.is-active{
  filter: none;
  animation: hb-kenburns 10s ease-in-out both;
}
/* subtle overlay pulse on change */
.has-hero-rotator.is-changing .hb-overlay{
  opacity: .92;
  transition: opacity .38s ease;
}
.has-hero-rotator .hb-overlay{ transition: opacity .6s ease; }



/* === Parallax for hero === */
.has-hero-rotator .hb-slide{
  will-change: transform;
}
.has-hero-rotator .hb-slide.is-active{
  transform: translateY(var(--parY, 0)) scale(1.08);
}
.has-hero-rotator .container, [data-hero-root] .container{
  transform: translateY(var(--parContentY, 0));
  will-change: transform;
}

/* Disable parallax on users who prefer reduced motion or small screens */
@media (prefers-reduced-motion: reduce){
  .has-hero-rotator .hb-slide.is-active,
  .has-hero-rotator .container, [data-hero-root] .container{
    transform: none !important;
  }
}
@media (max-width: 760px){
  .has-hero-rotator .hb-slide.is-active,
  .has-hero-rotator .container, [data-hero-root] .container{
    transform: none !important;
  }
}

/* plynulé skrolovanie (voliteľné) */
html { scroll-behavior: smooth; }

/* výška tvojho sticky headera (prispôsob) */
:root { --hdr: 72px; }  /* napr. 64–88px */

/* priraď sekciám, na ktoré odkazuješ z menu */
section[id],
[id^="sluzby"], [id^="galeria"], [id^="cennik"], [id^="kontakt"] {
  scroll-margin-top: calc(var(--hdr) + 16px);  /* +16px estetická medzera pod headerom */
}



/* === IPB Electro: Kontakt layout fix (2025-10-20) === */
#kontakt .contact {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* text | map */
  gap: 24px;
  align-items: start;
}
#kontakt .contact .map,
#kontakt .contact iframe {
  width: 100%;
  height: 380px; /* smaller map */
  border: 0;
  border-radius: 12px;
}
#kontakt .wrap { /* ensure the section lines up with other content */
  margin-top: 0;
}
@media (max-width: 900px) {
  #kontakt .contact {
    grid-template-columns: 1fr; /* stack on mobile */
  }
  #kontakt .contact .map,
  #kontakt .contact iframe {
    height: 300px;
  }
}
/* === End Kontakt layout fix === */



/* === IPB Electro: Cenník – searchable grid (2025-10-20) === */
.price-search {
  margin: 24px 0 16px;
  position: sticky;
  top: 72px;
  z-index: 5;
  background: linear-gradient(#0f1216, #0f1216);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.price-search input[type="search"]{
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  outline: none;
}
.work-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
@media (max-width: 1100px){
  .work-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .work-grid{ grid-template-columns: 1fr; }
}
.work-card{
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
}
.work-card h3{
  margin: 0 0 8px;
  font-size: 18px;
}
.work-item{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px 12px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px dashed rgba(255,255,255,0.1);
}
.work-item:first-of-type{ border-top: 0; }
.work-item .unit{ opacity:.8; }
.work-item .price{ font-weight: 700; white-space: nowrap; }
.work-item .note{ grid-column: 1 / -1; opacity:.75; font-size: .95em; }
.work-empty{ opacity:.7; padding: 12px 0;}
/* === End Cenník search grid === */



/* === IPB Electro: Cenník – Masonry layout (2025-10-20) === */
.work-grid{ display:block; } /* override previous grid */
.masonry{ column-count: 3; column-gap: 20px; }
@media (max-width: 1100px){ .masonry{ column-count: 2; } }
@media (max-width: 720px){ .masonry{ column-count: 1; } }

.work-card{
  display: inline-block; /* required for masonry columns */
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  margin: 0 0 20px;
  background: rgba(18,22,27,0.9);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

.work-card h3{
  margin: 0 0 12px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.work-card h3::before{
  content: "⦿";
  opacity:.9;
  font-size: 12px;
  line-height: 1;
  padding: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.work-item{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px 12px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.work-item:first-of-type{ border-top: 0; }
.work-item .name{ color: var(--text); }
.work-item .unit{ opacity:.75; }
.work-item .price{ font-weight: 800; white-space: nowrap; }
.work-item .note{ grid-column: 1 / -1; opacity:.75; font-size: .95em; }
/* === End Masonry === */



/* === IPB Electro: Cenník – brand banner above search === */
.price-brand{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 12px 0 6px;
}
.price-brand img{
  max-width: 340px;
  width: 42vw;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
  opacity: .98;
}
@media (max-width: 600px){
  .price-brand img{ max-width: 280px; width: 60vw; }
}
/* === End brand banner === */



/* === Galéria – dynamické kategórie + karusel === */
#galeria .dyncats { position:relative; margin: 10px 0 6px; }
#galeria .dyncats .track{
  display:flex; gap:16px; overflow:auto; scroll-snap-type:x mandatory;
  padding: 6px 56px 8px; scroll-behavior:smooth;
}
#galeria .dyncats .tile{
  flex: 0 0 clamp(260px, 30vw, 360px); scroll-snap-align:center;
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.02); position:relative; cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
#galeria .dyncats .tile .cover{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
#galeria .dyncats .tile .label{
  position:absolute; left:12px; bottom:12px; padding:6px 10px;
  border-radius:10px; background:rgba(0,0,0,.55); color:#fff; font-weight:700;
  border:1px solid rgba(255,255,255,.18);
}
#galeria .dyncats .nav{ position:absolute; inset:0; pointer-events:none; }
#galeria .dyncats .btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:1px solid var(--line);
  background:rgba(15,18,22,.85); pointer-events:auto; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
#galeria .dyncats .btn.prev{ left:6px; }
#galeria .dyncats .btn.next{ right:6px; }
#galeria .dyncats .btn:disabled{ opacity:.4; cursor:not-allowed; }
#galeria .dyncats.is-grid .track{ padding:0; overflow:visible; flex-wrap:wrap; }
#galeria .dyncats.is-grid .tile{ flex: 1 1 calc(33.333% - 11px); }
#galeria .original-tiles{ display:none !important; }
/* === End === */


/* Fade okraje pre horizontálne karusely (Galéria) */
.dyncats,
.gallery-carousel,
.album-row { position: relative; --fade: 42px; }

/* 1) Maskovanie obsahu – najčistejšie riešenie (podporované v moderných prehliadačoch) */
.dyncats .track,
.gallery-track,
.album-track {
  /* nechaj trochu vnútornej medzery, aby mal fade priestor (už máš padding 56px) */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
}

/* 2) Fallback – prekryvné tiene na okrajoch pre staršie prehliadače */
.dyncats::before,
.dyncats::after,
.gallery-carousel::before,
.gallery-carousel::after,
.album-row::before,
.album-row::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: var(--fade);
  pointer-events: none; z-index: 2;
  /* prispôsob základnému pozadiu stránky (tmavé) */
  background: linear-gradient(to right, rgba(11,14,18,1), rgba(11,14,18,0));
}
.dyncats::before,
.gallery-carousel::before,
.album-row::before { left: 0; }
.dyncats::after,
.gallery-carousel::after,
.album-row::after {
  right: 0;
  transform: scaleX(-1); /* zrkadlí gradient na pravý okraj */
}

/* Voliteľne: skry (alebo zjemni) scrollbar, aby nerušil */
.dyncats .track,
.gallery-track,
.album-track { -ms-overflow-style: none; scrollbar-width: none; }
.dyncats .track::-webkit-scrollbar,
.gallery-track::-webkit-scrollbar,
.album-track::-webkit-scrollbar { display: none; }

/* ===== MOBILE HEADER ===== */
@media (max-width: 900px){
  .site-header{ position: sticky; top:0; z-index:60; }
  /* skryť vodorovné menu a CTA tlačidlá */
  .site-header .nav, 
  .site-header .nav .links, 
  .site-header .cta { display:none !important; }
  /* zobraziť iba burger */
  .site-header .burger{ display:flex !important; align-items:center; gap:8px; }
}

/* mobilný panel vpravo (off-canvas) */
.mobile-panel{
  position: fixed; top:0; right:0; bottom:0;
  width: 86vw; max-width: 360px;
  transform: translateX(100%); transition: transform .28s ease;
  background: rgba(10,13,17,.98);
  box-shadow: -10px 0 28px rgba(0,0,0,.4);
  z-index: 70; overflow:auto;
}
.mobile-panel.is-open{ transform: translateX(0); }

/* tmavé pozadie za panelom */
.mobile-backdrop{
  position: fixed; inset:0;
  background: rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition: opacity .2s ease;
  z-index: 65;
}
.mobile-backdrop.show{ opacity:1; pointer-events:auto; }

/* zámok scrollu pri otvorenom paneli */
body.lock-scroll{ overflow:hidden; }



/* === MOBILE: remove dark right gutter / force full-width === */
@media (max-width: 900px){
  html, body{ width:100vw; max-width:100vw; overflow-x:hidden !important; }

  /* force all main wrappers to span full viewport width */
  .site-header,
  #uvod, #uvod.hero, .hero, [data-hero-root="true"],
  .section, section, .wrap, .container, .content, .grid, .row{
    width:100vw !important;
    max-width:100vw !important;
    margin-right:0 !important;
    padding-right:0 !important;
  }

  /* kill any leftover off-canvas/backdrop */
  .mobile-panel, .mobile-backdrop{ display:none !important; }

  /* images and media never overflow */
  img, video{ max-width:100%; height:auto; display:block; }
}



/* === Minimal mobile burger dropdown (non-invasive) === */
@media (max-width: 900px){
  header.site-header{ position:relative; }
  header.site-header [data-mobile-toggle]{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    background:none; border:0; color:#fff; font-size:24px; line-height:1; padding:8px;
    z-index: 5;
  }
  .mobile-dropdown{
    position:absolute; right:8px; top:100%; margin-top:8px;
    background:rgba(14,18,22,.98); color:#fff; border:1px solid rgba(255,255,255,.08);
    border-radius:14px; padding:10px; width:min(84vw, 320px);
    display:none; box-shadow:0 10px 30px rgba(0,0,0,.4); z-index: 10;
  }
  .mobile-dropdown.open{ display:block; }
  .mobile-dropdown a{ display:block; padding:10px 12px; color:#fff; text-decoration:none; border-radius:10px; }
  .mobile-dropdown a:hover{ background:rgba(255,255,255,.08); }
}
















/* === MOBILE: ponechaj iba náš burger, ostatné skry === */
@media (max-width: 900px){
  /* náš burger s data-mobile-toggle nechaj viditeľný */
  header [data-mobile-toggle] { display: inline-flex !important; }

  /* skry všetky ostatné „burger/menu“ tlačidlá, ktoré NEMAJÚ data-mobile-toggle */
  header button[class*="burger"]:not([data-mobile-toggle]),
  header button[class*="menu"]:not([data-mobile-toggle]),
  header .icon-menu:not([data-mobile-toggle]),
  header .menu-toggle:not([data-mobile-toggle]),
  header .nav-toggle:not([data-mobile-toggle]) {
    display: none !important;
  }
}

/* === DESKTOP: skry mobilný burger aj jeho dropdown === */
@media (min-width: 901px){
  header [data-mobile-toggle],
  #mobileDropdown {
    display: none !important;
  }
}




:root{ --ipb-red:#e53935; } /* IPB červená (uprav podľa potreby) */

/* farba ikony burger */
header [data-mobile-toggle]{
  color:var(--ipb-red) !important;
}
header [data-mobile-toggle] svg{
  fill:var(--ipb-red) !important; /* ak je ikona SVG */
}
header [data-mobile-toggle]:hover{
  filter:brightness(1.1);
}

/* zvýraznenie aktívnej sekcie v mobilnom dropdown-e */
#mobileDropdown a.is-active{
  color:var(--ipb-red) !important;  /* alebo */
  text-decoration: underline;       /* ak chceš skôr podčiarknutie */
  font-weight:700;
}

/* voliteľne rovnaké zvýraznenie aj v desktop navigácii */
header .nav a.is-active{
  color:var(--ipb-red) !important;
  text-decoration: underline;
}













:root{ --ipb-red:#e53935; } /* IPB červená */

/* DESKTOP: linka len pod textom na :hover (a .is-active) */
@media (min-width: 901px){
  header .nav a, header nav a{
    text-decoration:none;
    background-image: linear-gradient(var(--ipb-red), var(--ipb-red));
    background-size: 0% 3px;        /* výška pásika */
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .18s ease;
  }
  header .nav a:hover, header nav a:hover,
  header .nav a.is-active, header nav a.is-active{
    background-size: 100% 3px;      /* pri hover/aktívnom */
  }
}

/* MOBILNÝ DROPDOWN: rovnaké správanie */
@media (max-width: 900px){
  #mobileDropdown a{
    text-decoration:none;
    background-image: linear-gradient(var(--ipb-red), var(--ipb-red));
    background-size: 0% 3px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .18s ease;
  }
  #mobileDropdown a:hover,
  #mobileDropdown a.is-active{
    background-size: 100% 3px;
  }
}

/* Zruš moje desktopové podčiarkovanie, nech zostane tvoje pôvodné */
@media (min-width: 901px){
  header .nav a, header nav a{
    background-image: none !important;
    background-size: 0 0 !important;
  }
}


/* === Toast & form validation styles === */
#toast{
  position: fixed; left:50%; bottom:16px; transform:translateX(-50%);
  width: calc(100vw - 24px); max-width:480px; z-index:9999; pointer-events:none; display:none;
}
#toast .box{ background:#0b0f13; color:#fff; padding:12px 14px; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.45); text-align:center; font-weight:600; letter-spacing:.2px; }
#toast.show{ display:block; animation: toastIn .2s ease, toastOut .2s ease 3.2s forwards; }
@keyframes toastIn { from { opacity:0; transform: translate(-50%, 12px);} to { opacity:1; transform: translate(-50%, 0);} }
@keyframes toastOut{ to   { opacity:0; transform: translate(-50%, 8px);} }

.field-error input, .field-error textarea, .field-error select { border-color:#e53935 !important; outline:none; }
.field .error-msg{ display:block; color:#e53935; font-size:13px; margin-top:6px; }
button[disabled][data-loading]{ opacity:.7; cursor:progress; }


/* chybové zvýraznenie jednotlivých polí */
.field-error input, .field-error textarea, .field-error select { border-color:#e53935 !important; }
.field .error-msg{ display:block; color:#e53935; font-size:13px; margin-top:6px; }

/* súhrnná hláška pod formulárom */
.form-errors{ display:none; margin:16px 0 0; padding:12px 14px; border:1px solid #e53935; border-radius:12px; background:rgba(229,57,53,.06); color:#b71c1c; }
.form-errors.show{ display:block; }
.form-errors ul{ margin:8px 0 0 18px; }
.form-errors li{ margin:4px 0; }

/* toast (ak ešte nemáš) */
#toast{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); width:calc(100vw - 24px); max-width:480px; z-index:9999; pointer-events:none; display:none; }
#toast .box{ background:#0b0f13; color:#fff; padding:12px 14px; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.45); text-align:center; font-weight:600; }
#toast.show{ display:block; animation: toastIn .2s ease, toastOut .2s ease 3.2s forwards; }
@keyframes toastIn { from{opacity:0; transform:translate(-50%,12px)} to{opacity:1; transform:translate(-50%,0)} }
@keyframes toastOut{ to{opacity:0; transform:translate(-50%,8px)} }

button[disabled][data-loading]{ opacity:.7; cursor:progress; }


/* ==== NÁDHERNÝ ALERT PRE VALIDÁCIU FORMULÁRA ==== */
.quote-form .form-alert,
#quote-msg.form-alert {
  background: rgba(224, 38, 43, 0.10);            /* jemný červený závoj */
  border: 1px solid rgba(224, 38, 43, 0.35);
  border-left: 4px solid var(--brand);            /* výrazný ľavý akcent */
  border-radius: 14px;
  padding: 16px 18px;
  color: #ffd9d9;                                  /* svetlejší text na dark pozadí */
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  backdrop-filter: saturate(120%) blur(2px);
  max-width: 920px;
  margin: 18px auto 0;
}

.quote-form .form-alert h4 {
  margin: 0 0 8px 0;
  font-weight: 700;
  color: #ffb3b3;
  letter-spacing: .2px;
}

.quote-form .form-alert ul {
  margin: 8px 0 0 20px;
  padding: 0;
}

.quote-form .form-alert li {
  margin: 6px 0;
  line-height: 1.55;
  list-style: disc;
}

.quote-form .form-alert li::marker {
  color: var(--brand);                             /* červené odrážky */
}

/* ak máš pôvodne agresívny červený box, zruš mu pozadie a orámovanie: */
.quote-form .form-error,
.quote-form .errors,
#quote-msg.error {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}


/* Základné odkazy v menu */
#mainnav a {
  text-decoration: none;
  transition: text-decoration-color .2s ease, color .2s ease;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* Hover: podčiarknutie v brand farbe */
#mainnav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--brand);
}

/* Aktívna sekcia: len podčiarknutie, bez pozadia / orámovania / zmeny farby textu */
#mainnav a.active {
  color: inherit !important;
  background: transparent !important;
  border: none !important;
  text-decoration: underline;
  text-decoration-color: var(--brand);
}

/* --- IPB: header nav – aktívna/hover položka len podčiarknutá --- */
#mainnav a {
  color: inherit !important;                /* nikdy nemeň farbu textu */
  text-decoration: none;
  text-shadow: none !important;
}

#mainnav a:hover,
#mainnav a:focus {
  color: inherit !important;                /* žiadne sčervenanie textu */
  background: transparent !important;
  border: none !important;
  text-decoration: underline;
  text-decoration-color: var(--brand);      /* jemná červená čiara ako na hover */
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

#mainnav a.active,
header #mainnav a.active,
#mainnav a[aria-current="page"],
#mainnav a[aria-current="true"] {
  color: inherit !important;                /* kľúčové: nechaj farbu textu takú, aká je */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: underline !important;    /* iba podčiarknutie */
  text-decoration-color: var(--brand) !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 2px !important;
}

/* pre istotu vypni pseudo-prvky, ktoré by kreslili pásik/pill */
#mainnav a.active::before,
#mainnav a.active::after,
#mainnav a[aria-current="page"]::before,
#mainnav a[aria-current="true"]::after {
  content: none !important;
  display: none !important;
}

#file-status {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #9aa0a6;
}

.file-note { display:block; margin-top:8px; font-size:14px; color:#9aa0a6; }
.file-chip {
  display:inline-block; padding:6px 10px; margin:0 8px 6px 0;
  border-radius:999px; background:#2a2a2a; border:1px solid #3b3b3b; color:#ddd;
  cursor:pointer;
}
.file-chip:hover { background:#363636; }

.file-input-hidden { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.btn-file { display:inline-block; padding:8px 12px; border-radius:8px; border:1px solid #3b3b3b; background:#222; color:#eee; cursor:pointer; }
.btn-file:hover { background:#2c2c2c; }
#file-status { display:block; margin-top:8px; font-size:14px; color:#9aa0a6; }
.file-chip { display:inline-block; padding:6px 10px; margin:6px 8px 0 0; border-radius:999px; background:#2a2a2a; border:1px solid #3b3b3b; color:#ddd; cursor:pointer; }
.file-chip:hover { background:#363636; }