/* Průvodce výběrem grilu — stejný jazyk jako půjčovna (červená, Inter,
   velké verzálky), ale klidnější: uprostřed je jedna otázka a nic jiného,
   co by od ní odvádělo. */
:root{--red:#c93e32;--red-dark:#9f2c24;--black:#080a0b;--ink:#151515;--muted:#6d6d6d;--line:#e4e4e4;--shell:1440px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif;background:#fff}
.r-shell{width:min(calc(100% - 48px),var(--shell));margin-inline:auto}

/* Hlavička je schválně stejná jako na půjčovně — zákazník má poznat, že je
   pořád na jednom webu. */
.r-header{height:82px;background:#fff;position:relative;z-index:5;border-bottom:1px solid #eee}
.r-header-inner{height:100%;display:flex;align-items:center;gap:46px}
.r-logo{display:flex;align-items:center;flex:none}
.r-logo img{display:block;width:205px;height:58px;object-fit:contain}
.r-nav{display:flex;align-items:stretch;height:100%;gap:38px}
.r-nav a{display:flex;align-items:center;position:relative;color:#171717;text-decoration:none;text-transform:uppercase;font-size:14px;font-weight:800;letter-spacing:.035em}
.r-nav a:hover,.r-nav a.active{color:var(--red)}
.r-nav a.active:after,.r-nav a:hover:after{content:"";position:absolute;left:0;right:0;bottom:12px;height:3px;background:var(--red)}
.r-nav:hover a.active:not(:hover):after{display:none}
.r-header-contact{margin-left:auto;color:var(--red);font-weight:800;text-decoration:none;white-space:nowrap}
.r-header-contact:before{content:"☎ ";font-size:18px}
.v-navrat{position:fixed;z-index:40;left:22px;bottom:22px;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 17px;background:#111;color:#fff;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 8px 28px rgba(0,0,0,.2);transition:background .18s,transform .18s}.v-navrat:hover{background:var(--red);transform:translateY(-2px)}.v-navrat span{color:var(--red);font-size:17px;line-height:1}.v-navrat:hover span{color:#fff}

.r-btn{min-height:52px;min-width:245px;padding:0 24px;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;border:0;border-radius:4px;text-transform:uppercase;text-decoration:none;font:inherit;font-size:14px;font-weight:900;letter-spacing:.02em;cursor:pointer;transition:.2s}
.r-btn-primary{background:var(--red);color:#fff}
.r-btn-primary:hover{background:var(--red-dark)}
.r-btn-primary:disabled{background:#d8d8d8;color:#fff;cursor:not-allowed}
.r-btn-ghost{color:var(--ink);border:1px solid #cfcfcf;background:#fff}
.r-btn-ghost:hover{border-color:var(--red);color:var(--red)}

/* Hero: krátké. Kdo sem přišel vybírat, má hned vidět první otázku. */
.v-hero{background:var(--black);color:#fff;padding:52px 0 40px}
.v-hero .r-shell{max-width:900px}
.v-kicker{margin:0 0 12px;color:var(--red);text-transform:uppercase;letter-spacing:.11em;font-size:13px;font-weight:900}
.v-hero h1{margin:0;text-transform:uppercase;font-size:clamp(40px,5vw,68px);line-height:.95;letter-spacing:-.03em}
.v-hero p{margin:18px 0 0;color:#d8d8d8;font-size:17px;line-height:1.55;max-width:620px}

/* Pruh, jak daleko je zákazník. Bez čísel v procentech — stačí, že se hýbe. */
.v-progres{height:4px;background:#ebebeb}
.v-progres i{display:block;height:100%;background:var(--red);width:0;transition:width .3s}

.v-stage{padding:56px 0 72px;background:#f7f7f7;min-height:520px}
.v-stage .r-shell{max-width:940px}
.v-krok{margin:0 0 10px;color:var(--red);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.11em}
.v-krok span{color:var(--muted)}
.v-stage h2{margin:0;font-size:clamp(28px,3.2vw,42px);line-height:1.12}
.v-popis{margin:14px 0 0;color:var(--muted);font-size:15px;line-height:1.6;max-width:640px}

/* Odpovědi. Velká tlačítka — tohle se často vyplňuje na mobilu jednou rukou. */
.v-moznosti{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:30px 0 34px}
.v-moznost{min-height:78px;padding:16px 20px;text-align:left;background:#fff;border:1px solid #dcdcdc;border-radius:6px;font:inherit;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;transition:.15s}
.v-moznost:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.07)}
.v-moznost[data-vybrano=true]{background:var(--red);border-color:var(--red);color:#fff}
.v-moznost:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.v-ovladani{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.v-ovladani>div{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto}
.v-zpet{background:none;border:0;padding:10px 4px;font:inherit;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer}
.v-zpet:hover{color:var(--red)}

/* Výsledek */
.v-vysledky{list-style:none;margin:30px 0 34px;padding:0;display:grid;gap:18px}
.v-karta{display:grid;grid-template-columns:280px 1fr;gap:26px;background:#fff;border:1px solid #e1e1e1;border-radius:8px;padding:22px;position:relative}
.v-karta-top{border-color:var(--red);box-shadow:0 14px 34px rgba(201,62,50,.12)}
.v-znacka{position:absolute;top:-13px;left:22px;margin:0;background:var(--red);color:#fff;border-radius:3px;padding:5px 12px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
/* Rámeček s fotkou se nesmí natahovat na výšku celé karty — pod obrázkem
   by zbylo prázdné místo. Drží si svou výšku a sedí u horního okraje. */
.v-karta-foto{display:grid;place-items:center;background:#fafafa;border-radius:6px;align-self:start;padding:10px}
.v-karta-foto img{width:100%;height:210px;object-fit:contain}
.v-karta-telo h3{margin:0;font-size:20px;line-height:1.3}
.v-cena{margin:8px 0 14px;display:flex;align-items:baseline;gap:7px;font-size:26px;font-weight:900;color:var(--red)}
.v-cena span{font-size:13px;font-weight:600;color:var(--muted)}
.v-proc{margin:0 0 12px;font-size:15px;line-height:1.55}
.v-duvody{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.v-duvody li{background:#f2f2f2;border-radius:3px;padding:6px 11px;font-size:12.5px;font-weight:700;color:#3b3b3b}
.v-duvody li:before{content:"✓ ";color:var(--red)}
.v-dopl-nadpis{margin:12px 0 8px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}

/* Sestavovač sady — zaškrtávací řádky a součet. Rozbaluje se uvnitř karty,
   nic nepřesahuje ven. */
.v-sestava{margin:4px 0 16px;border-top:1px solid #eee}
.v-polozka{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid #f2f2f2;font-size:13.5px;cursor:pointer}
.v-polozka input{width:17px;height:17px;accent-color:var(--red);cursor:pointer;flex:none}
.v-polozka span{flex:1}
.v-polozka b{white-space:nowrap;font-variant-numeric:tabular-nums}
.v-polozka:hover{color:var(--red)}
.v-sestava-patka{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:14px}
.v-soucet{margin:0;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.v-soucet b{font-size:20px;color:var(--red);margin-left:4px}
.v-soucet small{margin-left:6px;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0}
.v-do-kosiku{min-width:0;padding:0 20px;min-height:46px}
.v-do-kosiku-hotovo{background:#1c7c3f}
.v-do-kosiku-hotovo:hover{background:#166332}
.v-karta-odkaz{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:13px;font-weight:900;text-transform:uppercase;text-decoration:none}
.v-karta-odkaz:hover{color:var(--red)}
.v-btn-tmavy{min-width:0}

/* Porovnání — jediná otázka, na kterou odpovídá: čím se ty tři grily liší.
   Na úzkém okně se posouvá tabulka uvnitř svého rámečku, ne celá stránka. */
.v-porovnani{margin:6px 0 30px}
.v-porovnani h3{margin:0 0 14px;font-size:20px}
.v-porovnani-box{overflow-x:auto;background:#fff;border:1px solid #e1e1e1;border-radius:8px}
.v-porovnani table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.v-porovnani th,.v-porovnani td{padding:12px 16px;text-align:left;border-bottom:1px solid #f0f0f0;vertical-align:top}
.v-porovnani thead th{background:#fafafa;font-size:12px;text-transform:uppercase;letter-spacing:.05em;line-height:1.35}
.v-porovnani thead th:first-child{color:var(--muted)}
.v-porovnani tbody th{width:170px;color:var(--muted);font-weight:700}
.v-porovnani tbody tr:last-child th,.v-porovnani tbody tr:last-child td{border-bottom:0}
.v-ano{color:#1c7c3f}
.v-ne{color:#b3b3b3}

/* Pás „co u nás dostanete". Čtyři stejně široké sloupce, švy na jedné svislici. */
.v-pas{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.v-pas-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.v-pas-grid article{padding:22px 28px;border-right:1px solid var(--line)}
.v-pas-grid article:last-child{border-right:0}
.v-pas-grid strong{display:block;font-size:15px}
.v-pas-grid small{display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.5}

/* Nejčastější otázky. Rozbaluje se uvnitř seznamu, nic se nepřekrývá. */
.v-faq{padding:58px 0 68px}
.v-faq .r-shell{max-width:940px}
.v-faq h2{margin:0;font-size:clamp(26px,3vw,38px)}
.v-faq-list{margin-top:26px;border-top:1px solid var(--line)}
.v-faq details{border-bottom:1px solid var(--line)}
.v-faq summary{padding:18px 34px 18px 0;font-size:16px;font-weight:800;cursor:pointer;position:relative;list-style:none}
.v-faq summary::-webkit-details-marker{display:none}
.v-faq summary:after{content:"+";position:absolute;right:6px;top:15px;font-size:24px;font-weight:400;color:var(--red)}
.v-faq details[open] summary:after{content:"–"}
.v-faq summary:hover{color:var(--red)}
.v-faq details p{margin:0 0 20px;padding-right:34px;color:#3d3d3d;font-size:15px;line-height:1.65}
.v-faq-vic{margin:24px 0 0;color:var(--muted);font-size:14px}
.v-faq-vic a{color:var(--red);font-weight:700}

.r-footer{background:var(--black);color:#bbb;padding:24px 0}
.r-footer .r-shell{display:flex;gap:25px;align-items:center;flex-wrap:wrap}
.r-footer a{color:#fff;text-decoration:none}
.r-footer a:hover{color:var(--red)}
.r-footer-links{display:flex;gap:20px;margin-left:auto}

@media(max-width:1100px){
  .v-pas-grid{grid-template-columns:1fr 1fr}
  .v-pas-grid article:nth-child(2){border-right:0}
  .v-pas-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:900px){
  .v-karta{grid-template-columns:1fr}
  .v-karta-foto{min-height:0}
  .v-karta-foto img{height:180px}
}
@media(max-width:760px){
  .r-shell{width:min(calc(100% - 30px),var(--shell))}
  .r-header{height:auto}
  .r-header-inner{padding:12px 0;display:grid;grid-template-columns:1fr;gap:6px}
  .r-logo img{width:165px;height:44px}
  .r-nav{height:auto;overflow-x:auto;gap:20px;padding:5px 0}
  .r-nav a{white-space:nowrap;padding-bottom:7px}
  .r-nav a.active:after,.r-nav a:hover:after{bottom:0}
  .r-header-contact{display:none}
  .v-navrat{left:12px;right:12px;bottom:12px;justify-content:center;min-height:48px}
  .v-hero{padding:34px 0 28px}
  .v-stage{padding:34px 0 48px}
  .v-moznosti{grid-template-columns:1fr}
  .v-ovladani{display:grid}
  .v-ovladani>div{display:grid;margin-left:0}
  .r-btn{width:100%;min-width:0}
  /* Odkazy v patičce se musí zalomit — vedle sebe jsou na mobilu širší
     než displej a posouvaly celou stránku do strany. */
  .r-footer-links{margin-left:0;flex-wrap:wrap;gap:12px 20px}
  .v-pas-grid{grid-template-columns:1fr}
  .v-pas-grid article{border-right:0;border-bottom:1px solid var(--line)}
  .v-pas-grid article:last-child{border-bottom:0}
  .v-faq{padding:34px 0 44px}
}

/* Pravda u doporučeného grilu: když ho nemáme skladem, řekne se to rovnou
   a zákazník má hned kudy dál. Roman 8. 9. 2026: „napiš pravdu, co vyjde."  */
.v-neni-skladem{margin:8px 0 0;padding:9px 11px;border-left:3px solid var(--red);background:#fff5f5;color:#8a1319;font-size:13px;line-height:1.5}
.v-neni-skladem a{color:var(--red);font-weight:800}