/* defibrilator.cz — nový frontend · design system
   Princípy: mobile-first (P1), rýchlosť (P9), dva režimy CTA (P5) */
:root{
  --red:#c1121f; --red-dark:#9d0e19; --navy:#14213d; --navy-2:#1d3557;
  --ok:#1f7a2d; --bg:#ffffff; --bg-alt:#f5f7fa; --line:#e4e8ee;
  --text:#1c2430; --muted:#5c6675; --radius:10px;
  --shadow:0 2px 10px rgba(20,33,61,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.55; font-size:16px;
  /* rezerva pre spodnú akčnú lištu na mobile */
  padding-bottom:64px;
}
@media(min-width:900px){ body{padding-bottom:0} }
img{max-width:100%; height:auto; display:block}
a{color:var(--navy-2)}
.container{max-width:1140px; margin:0 auto; padding:0 16px}

/* ── Header ─────────────────────────────────────────── */
.topbar{background:var(--navy); color:#fff; font-size:.82rem}
.topbar .container{display:flex; justify-content:space-between; align-items:center; min-height:32px; gap:12px}
.topbar a{color:#fff; text-decoration:none}
.topbar .contacts{display:none; gap:18px}
@media(min-width:900px){ .topbar .contacts{display:flex} }
header.site{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line)}
header.site .container{display:flex; align-items:center; gap:16px; min-height:60px}
.logo{font-weight:800; font-size:1.15rem; color:var(--navy); text-decoration:none; letter-spacing:-.02em; flex-shrink:0}
.logo .dot{color:var(--red)}
nav.main{display:none}
@media(min-width:900px){
  nav.main{display:flex; gap:4px; margin-left:auto}
  nav.main a{padding:8px 12px; text-decoration:none; color:var(--text); font-weight:600; font-size:.92rem; border-radius:6px}
  nav.main a:hover{background:var(--bg-alt)}
  nav.main a.cta{background:var(--red); color:#fff}
  nav.main a.cta:hover{background:var(--red-dark)}
}
/* Mobilné menu — jednoduchý <details>, žiadny JS overlay (fix rage-klikov) */
.mnav{margin-left:auto}
@media(min-width:900px){ .mnav{display:none} }
.mnav summary{list-style:none; cursor:pointer; padding:10px; font-weight:700; color:var(--navy)}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] .mnav-list{display:flex}
.mnav-list{display:none; position:absolute; left:0; right:0; top:60px; background:#fff;
  border-bottom:2px solid var(--red); flex-direction:column; box-shadow:var(--shadow)}
.mnav-list a{padding:14px 20px; text-decoration:none; color:var(--text); font-weight:600; border-top:1px solid var(--line)}

/* ── Tlačidlá — dva režimy (P5) ─────────────────────── */
.btn{display:inline-block; padding:12px 22px; border-radius:8px; text-decoration:none;
  font-weight:700; font-size:.95rem; border:0; cursor:pointer; text-align:center}
.btn-lead{background:var(--red); color:#fff}         /* konzultácia / poptávka */
.btn-lead:hover{background:var(--red-dark)}
.btn-buy{background:var(--ok); color:#fff}           /* rýchly nákup materiálu */
.btn-ghost{background:#fff; color:var(--navy); border:2px solid var(--navy)}
.btn-mail{background:#fff; color:var(--red); border:2px solid var(--red)}
.btn-block{display:block; width:100%}

/* ── Hero / rozcestník (P2) ─────────────────────────── */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%); color:#fff; padding:36px 0 28px}
.hero h1{font-size:clamp(1.5rem,4vw,2.3rem); margin:0 0 8px; letter-spacing:-.02em; line-height:1.2}
.hero p.sub{margin:0 0 20px; color:#cdd6e4; max-width:640px; font-size:1.02rem}
.segments{display:grid; gap:10px; grid-template-columns:1fr}
@media(min-width:700px){ .segments{grid-template-columns:repeat(3,1fr)} }
.seg{background:#fff; color:var(--text); border-radius:var(--radius); padding:16px 18px;
  text-decoration:none; box-shadow:var(--shadow); display:block; border-top:4px solid var(--red)}
.seg b{display:block; font-size:1.05rem; color:var(--navy); margin-bottom:2px}
.seg span{font-size:.88rem; color:var(--muted)}
.seg:hover{transform:translateY(-2px); transition:.15s}
.hero .quick{margin-top:16px; font-size:.9rem; color:#cdd6e4}
.hero .quick a{color:#fff}

/* ── Trust bar (P7) ─────────────────────────────────── */
.trust{background:var(--bg-alt); border-block:1px solid var(--line)}
.trust .container{display:flex; flex-wrap:wrap; gap:8px 28px; padding:12px 16px; justify-content:center; font-size:.88rem; color:var(--navy)}
.trust b{color:var(--red)}

/* ── Sekcie ─────────────────────────────────────────── */
section{padding:36px 0}
section.alt{background:var(--bg-alt)}
h2.sec{font-size:clamp(1.3rem,3vw,1.7rem); color:var(--navy); margin:0 0 4px; letter-spacing:-.01em}
p.sec-sub{color:var(--muted); margin:0 0 22px}

/* ── Produktové karty ───────────────────────────────── */
.cards{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:640px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(min-width:980px){ .cards{grid-template-columns:repeat(3,1fr)} }
.pcard{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:8px}
.pcard .ph{background:var(--bg-alt); border-radius:8px; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:#aab3c0; font-size:.85rem}
.pcard h3{margin:4px 0 0; font-size:1.05rem; color:var(--navy)}
.pcard h3 a{text-decoration:none; color:inherit}
.pcard .badge{align-self:flex-start; font-size:.75rem; font-weight:700; padding:2px 9px; border-radius:20px; background:#fdeaea; color:var(--red)}
.pcard .badge.buy{background:#e7f4e9; color:var(--ok)}
.pcard ul{margin:0; padding-left:18px; font-size:.86rem; color:var(--muted)}
.pcard .price{font-size:1.2rem; font-weight:800; color:var(--navy); margin-top:auto}
.pcard .price small{font-weight:400; color:var(--muted); font-size:.75rem}
.pcard .cta-row{display:flex; gap:8px; flex-wrap:wrap}
.pcard .cta-row .btn{flex:1; padding:10px 8px; font-size:.86rem}

/* ── Porovnávacia tabuľka (P3) ──────────────────────── */
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius)}
table.cmp{border-collapse:collapse; width:100%; min-width:680px; font-size:.88rem; background:#fff}
table.cmp th{background:var(--navy); color:#fff; padding:9px 12px; text-align:left; position:sticky; left:auto}
table.cmp td{padding:8px 12px; border-bottom:1px solid var(--line)}
table.cmp tr:nth-child(even) td{background:#fafbfd}
table.cmp td.hl{font-weight:700; color:var(--red)}

/* ── Produktová stránka (P4) ────────────────────────── */
.pgrid{display:grid; gap:28px; grid-template-columns:1fr}
@media(min-width:900px){ .pgrid{grid-template-columns:1.05fr .95fr} }
.gallery .main{border:1px solid var(--line); border-radius:var(--radius); aspect-ratio:4/3;
  background:var(--bg-alt); display:flex; align-items:center; justify-content:center; color:#aab3c0}
.gallery .thumbs{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:8px}
.gallery .thumbs button{aspect-ratio:1; border:1px solid var(--line); border-radius:6px; background:var(--bg-alt); cursor:pointer; font-size:.7rem; color:#aab3c0}
.gallery .thumbs button[aria-current="true"]{border-color:var(--red); border-width:2px}
.buybox{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.buybox .price{font-size:1.7rem; font-weight:800; color:var(--navy)}
.buybox .price small{font-size:.8rem; font-weight:400; color:var(--muted)}
.buybox .stock{color:var(--ok); font-weight:600; font-size:.88rem; margin:4px 0 14px}
.buybox .actions{display:flex; flex-direction:column; gap:9px}
.contact-strip{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:.92rem}
.contact-strip a{display:flex; align-items:center; gap:8px; padding:7px 0; text-decoration:none; color:var(--navy); font-weight:600}
.contact-strip .note{color:var(--muted); font-size:.8rem}

/* ── Mini-poptávka inline (P4) ──────────────────────── */
.miniform{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-top:18px}
.miniform h3{margin:0 0 4px; color:var(--navy)}
.miniform p{margin:0 0 12px; font-size:.86rem; color:var(--muted)}
.miniform .row{display:grid; gap:10px; grid-template-columns:1fr}
@media(min-width:640px){ .miniform .row{grid-template-columns:1fr 1fr} }
input,textarea,select{width:100%; padding:12px; border:1px solid #c9d1dc; border-radius:8px; font:inherit; background:#fff}
input:focus,textarea:focus{outline:2px solid var(--navy-2)}
label{font-size:.84rem; font-weight:600; color:var(--navy); display:block; margin-bottom:4px}
.form-ok{background:#e7f4e9; color:var(--ok); border-radius:8px; padding:14px; font-weight:600; display:none}

/* ── Video facade (P7) ──────────────────────────────── */
.vid{position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; background:var(--navy); cursor:pointer; border:0; padding:0; width:100%}
.vid img{width:100%; height:100%; object-fit:cover; opacity:.85}
.vid .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.vid .play span{background:var(--red); color:#fff; border-radius:50%; width:64px; height:64px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 4px 20px rgba(0,0,0,.4)}
.vid iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ── Kroky / obsah ──────────────────────────────────── */
.steps{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:800px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.step .n{width:30px; height:30px; border-radius:50%; background:var(--red); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:8px}
.step b{color:var(--navy)}
.step p{font-size:.86rem; color:var(--muted); margin:6px 0 0}

/* ── FAQ ────────────────────────────────────────────── */
.faq details{border:1px solid var(--line); border-radius:8px; margin-bottom:8px; background:#fff}
.faq summary{padding:13px 16px; font-weight:700; cursor:pointer; color:var(--navy)}
.faq details div{padding:0 16px 14px; color:var(--muted); font-size:.92rem}

/* ── Ďalší krok — žiadna slepá ulička (P6) ──────────── */
.nextsteps{display:grid; gap:10px; grid-template-columns:1fr}
@media(min-width:700px){ .nextsteps{grid-template-columns:repeat(3,1fr)} }
.nextsteps a{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; text-decoration:none}
.nextsteps a b{color:var(--navy); display:block}
.nextsteps a span{font-size:.84rem; color:var(--muted)}
.nextsteps a:hover{border-color:var(--navy)}

/* ── Footer ─────────────────────────────────────────── */
footer{background:var(--navy); color:#c3cbd9; padding:34px 0 90px; font-size:.9rem}
@media(min-width:900px){ footer{padding-bottom:34px} }
footer .cols{display:grid; gap:24px; grid-template-columns:1fr}
@media(min-width:800px){ footer .cols{grid-template-columns:repeat(4,1fr)} }
footer h4{color:#fff; margin:0 0 10px; font-size:.95rem}
footer a{color:#c3cbd9; text-decoration:none; display:block; padding:3px 0}
footer a:hover{color:#fff}
footer .legal{border-top:1px solid rgba(255,255,255,.15); margin-top:26px; padding-top:14px; font-size:.78rem; color:#8b96a8}

/* ── Sticky mobilná akčná lišta (P1 — jadro riešenia) ─ */
.actionbar{position:fixed; bottom:0; left:0; right:0; z-index:60; display:grid;
  grid-template-columns:1fr 1fr 1.4fr; background:#fff; border-top:1px solid var(--line);
  box-shadow:0 -3px 14px rgba(20,33,61,.14); padding-bottom:env(safe-area-inset-bottom)}
.actionbar a{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; padding:9px 4px 8px; text-decoration:none; font-size:.72rem; font-weight:700; color:var(--navy)}
.actionbar a .ico{font-size:1.15rem; line-height:1}
.actionbar a.primary{background:var(--red); color:#fff}
@media(min-width:900px){ .actionbar{display:none} }

/* Breadcrumbs */
.crumbs{font-size:.8rem; color:var(--muted); padding:14px 0 0}
.crumbs a{color:var(--muted)}

/* ── Konfigurátor úrovní (samostatně / + skříňka / komplet) ── */
.tiers{display:grid; gap:12px; grid-template-columns:1fr; margin:14px 0}
@media(min-width:860px){ .tiers{grid-template-columns:repeat(3,1fr)} }
.tier{position:relative; background:#fff; border:2px solid var(--line); border-radius:var(--radius);
  padding:18px; display:flex; flex-direction:column; gap:8px; cursor:pointer}
.tier:hover{border-color:var(--navy)}
.tier.hot{border-color:var(--red)}
.tier .flag{position:absolute; top:-11px; left:14px; background:var(--red); color:#fff;
  font-size:.72rem; font-weight:700; padding:2px 10px; border-radius:12px}
.tier h4{margin:2px 0 0; color:var(--navy); font-size:1rem}
.tier ul{margin:0; padding-left:18px; font-size:.85rem; color:var(--muted); flex:1}
.tier ul li.inc::marker{content:"✔ "; color:var(--ok)}
.tier .tp{font-size:1.25rem; font-weight:800; color:var(--navy)}
.tier .tp small{font-weight:400; color:var(--muted); font-size:.72rem}
.tier .btn{padding:10px}
.pick-note{font-size:.82rem; color:var(--muted); background:#fff8e8; border:1px solid #f0dfae;
  border-radius:8px; padding:10px 12px}
.pimg{border:1px solid var(--line); border-radius:var(--radius); background:#fff; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center; overflow:hidden}
.pimg img{width:100%; height:100%; object-fit:contain}
.pcard .ph{aspect-ratio:1; background:#fff; overflow:hidden; padding:6px}
.pcard .ph img{width:100%; height:100%; object-fit:contain}

/* ── Kontaktná karta (Miška) ── */
.person{display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.person img{width:84px; height:84px; border-radius:50%; object-fit:cover; flex-shrink:0}
.person .p-name{font-weight:800; color:var(--navy); font-size:1.02rem}
.person .p-role{font-size:.82rem; color:var(--muted); margin-bottom:6px}
.person a{display:inline-block; margin-right:14px; text-decoration:none; color:var(--navy); font-weight:600; font-size:.92rem}
.person a:hover{color:var(--red)}