:root {
  --pozadi: #fff;
  --text: #111;
  --tlumeny: #6b6b6b;
  --akcent: #ffc21a;
  --akcent-hover: #f2b200;
  --akcent-text: #111;
  --kosik-pozadi: #111;
  --kosik-text: #fff;
  --linka: #e6e6e6;
  --plocha: #f4f4f3;
  --chyba: #c4321c;
}
.znacka { font-size: 20px; letter-spacing: -0.035em; }
.hlavicka .obal { gap: 36px; }
.navigace { margin-left: auto; }
.hlavicka-akce { margin-left: 8px; }
.drobecky { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 0; font-size: 14px; color: var(--tlumeny); }
@media (hover: hover) and (pointer: fine) { .drobecky a:hover { color: var(--text); } }

.stranka-hlava { max-width: 820px; padding: 28px 0 0; }
.stranka-hlava h1 { font-size: clamp(36px, 4.4vw, 58px); }
.stranka-hlava .perex { max-width: 60ch; margin-top: 14px; font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--tlumeny); }
.stranka-hlava .tlacitka { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.dokument { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px 72px; align-items: start; padding: 48px 0 112px; }
.dokument.bez-osnovy { grid-template-columns: minmax(0, 1fr); }
.osnova { position: sticky; top: 24px; display: grid; gap: 2px; font-size: 14.5px; }
.osnova p { margin-bottom: 6px; font-weight: 700; }
.osnova a { padding: 5px 0 5px 14px; border-left: 2px solid var(--linka); color: var(--tlumeny); transition: color 200ms, border-color 200ms; }
.osnova a[aria-current="true"] { border-color: #111; color: var(--text); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .osnova a:hover { color: var(--text); } }

.text { max-width: 72ch; color: #2b2b2b; }
.text > :first-child { margin-top: 0; }
.text h2 { margin: 52px 0 14px; font-size: clamp(23px, 2.2vw, 28px); color: var(--text); scroll-margin-top: 24px; }
.text h3 { margin: 28px 0 8px; font-size: 18px; color: var(--text); }
.text p + p, .text p + ul, .text p + ol, .text ul + p, .text ol + p, .text table + p { margin-top: 12px; }
.text ul, .text ol { margin: 12px 0 0; padding-left: 22px; }
.text ul { list-style: disc; }
.text ol { list-style: decimal; }
.text li + li { margin-top: 8px; }
.text li::marker { color: var(--tlumeny); }
.text a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text b, .text strong { color: var(--text); }
.text table { width: 100%; margin: 18px 0 0; border-collapse: collapse; font-size: 15px; }
.text th { padding: 0 14px 10px 0; text-align: left; font-size: 13.5px; color: var(--tlumeny); border-bottom: 1.5px solid #111; }
.text td { padding: 12px 14px 12px 0; vertical-align: top; border-bottom: 1px solid var(--linka); }
.text code { font: 500 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.text figure { margin: 24px 0 0; }
.text figure img { width: 100%; height: auto; border-radius: 22px; }
.text figcaption { margin-top: 10px; font-size: 14px; color: var(--tlumeny); }
.text .volby-dvoji + p { margin-top: 18px; }
.ramecek { margin-top: 20px; padding: 22px 24px; border: 1.5px solid var(--linka); border-radius: 22px; }
.ramecek h3 { margin-top: 0; }
.ramecek.vzor { white-space: pre-line; }
.doplnit { padding: 1px 5px; border-radius: 5px; background: #fff2b3; color: #111; }
.volby-dvoji { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.volby-dvoji .ramecek { margin-top: 0; }
.volby-dvoji .cena-volby { display: block; margin: 6px 0 10px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.kroky-postup { counter-reset: krok; list-style: none !important; padding-left: 0 !important; }
.kroky-postup > li { position: relative; padding-left: 52px; counter-increment: krok; }
.kroky-postup > li + li { margin-top: 22px; }
.kroky-postup > li::before { content: counter(krok); position: absolute; left: 0; top: -3px; display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid #111; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: #111; }
.kontakt-dvoji { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: start; padding: 48px 0 112px; }
.kontakt-udaje { display: grid; gap: 22px; }
.kontakt-udaje .velke { font-size: clamp(28px, 3vw, 38px); font-weight: 700; letter-spacing: -0.03em; }
.kontakt-udaje p { color: var(--tlumeny); }
.kontakt-udaje p b, .kontakt-udaje p a { color: var(--text); }

.formular { display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); border: 1.5px solid var(--linka); border-radius: 26px; }
.formular h2 { margin: 0; font-size: 24px; }
.formular .rada { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pole { display: grid; gap: 7px; }
.pole label, .pole .popisek-pole { font-size: 14.5px; font-weight: 700; }
.pole label small { font-weight: 500; color: var(--tlumeny); }
.pole input:not([type=radio]):not([type=checkbox]), .pole textarea { width: 100%; height: 54px; padding: 0 16px; border: 1.5px solid var(--linka); border-radius: 14px; background: #fff; font-size: 17px; font-weight: 500; font-family: inherit; line-height: 1.4; color: var(--text); transition: border-color 320ms var(--ease-out); }
.pole textarea { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; }
.pole input:focus, .pole textarea:focus { outline: none; border-color: #111; }
.pole input[aria-invalid="true"], .pole textarea[aria-invalid="true"] { border-color: var(--chyba); }
.pole .chyba { font-size: 13.5px; font-weight: 500; color: var(--chyba); }
.pole[hidden] { display: none; }
.prepinac-volby { display: flex; flex-wrap: wrap; gap: 8px; }
.prepinac-volby label { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border: 1.5px solid var(--linka); border-radius: 999px; font-weight: 700; font-size: 15px; cursor: pointer; transition: border-color 200ms; }
.prepinac-volby label:has(input:checked) { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.prepinac-volby input { appearance: auto; -webkit-appearance: radio; width: 18px; height: 18px; margin: 0; padding: 0; border: 0; accent-color: #111; }
.formular .tl { justify-self: start; min-height: 56px; padding: 0 28px; }
.formular .drobne { font-size: 13.5px; color: var(--tlumeny); }
.formular .drobne a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.formular-chyba { padding: 12px 16px; border: 1.5px solid var(--chyba); border-radius: 14px; color: var(--chyba); font-size: 15px; font-weight: 500; }
.formular-chyba[hidden], [data-ts][hidden] { display: none; }
.hotovo-karta { display: grid; gap: 12px; padding: clamp(22px, 3vw, 32px); border: 1.5px solid #111; border-radius: 26px; }
.hotovo-karta h2 { margin: 0; font-size: 26px; }
.hotovo-karta p { color: var(--tlumeny); }
.hotovo-karta svg { width: 44px; height: 44px; }
.hotovo-karta svg circle { fill: var(--akcent); transform-box: fill-box; transform-origin: center; animation: pop 600ms var(--ease-pruzina) both; }
.hotovo-karta svg path { fill: none; stroke: var(--akcent-text); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: kresli 480ms var(--ease-out) 240ms forwards; }
.ucinnost { margin-top: 48px; font-size: 14px; color: var(--tlumeny); }

.paticka { padding: 64px 0 28px; background: #f4f4f3; font-size: 15px; }
.paticka-horni { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 64px; }
.paticka-znacka { display: grid; gap: 10px; align-content: start; }
.paticka-znacka p { max-width: 34ch; color: var(--tlumeny); }
.paticka .znacka { color: var(--text); font-size: 21px; }
.paticka-kontakt { display: grid; gap: 4px; margin-top: 8px; }
.paticka-kontakt a { color: var(--text); font-weight: 700; }
.paticka-sloupce { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.paticka-sloupce > div { display: grid; gap: 9px; align-content: start; }
.paticka-sloupce a, .paticka-sloupce p { color: var(--tlumeny); }
.paticka .nadpis { color: var(--text); font-weight: 700; font-size: 15px; }
.paticka-spodni { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; margin-top: 48px; padding-top: 22px; border-top: 1px solid #e3e3e1; font-size: 13px; color: var(--tlumeny); }
.paticka-spodni p { max-width: 80ch; }
.kredit { display: flex; align-items: center; gap: 10px; }
.kredit-text { font-size: 13px; color: var(--tlumeny); }
.statly { display: inline-flex; align-items: center; color: rgb(0 0 0 / .55); transition: color var(--dur) var(--ease); }
.statly__lock { display: inline-flex; align-items: center; gap: 9px; }
.statly__s { width: 17px; height: 32px; flex: none; }
.statly__w { font-family: 'Outfit', 'Satoshi', sans-serif; font-weight: 600; font-size: 21px; letter-spacing: -0.03em; line-height: 1; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .statly:hover { color: #111; } .paticka-sloupce a:hover { color: var(--text); } }
@media (max-width: 960px) {
  .hlavicka-akce { margin-left: auto; }
  .dokument, .kontakt-dvoji { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .osnova { position: static; padding: 16px 18px; border: 1.5px solid var(--linka); border-radius: 18px; }
  .osnova a { padding: 4px 0; border: 0; }
  .paticka-horni { grid-template-columns: 1fr; }
  .paticka-sloupce { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .formular .rada, .volby-dvoji { grid-template-columns: 1fr; }
  .text table { font-size: 14px; }
  .tabulka-obal { overflow-x: auto; }
}

.pos-foto { margin: clamp(28px, 4vw, 44px) 0 0; }
.pos-foto img { width: 100%; height: auto; border-radius: 22px; }
.pos-dvoji { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 64px; align-items: center; padding: clamp(56px, 7vw, 96px) 0 0; }
.pos-dvoji h2, .pos-kalk h2, .pos-pozor h2, .pos-otazky h2 { font-size: clamp(28px, 3vw, 40px); }
.pos-text p { max-width: 60ch; margin-top: 14px; color: #2b2b2b; }
.pos-text p b { color: var(--text); }
.pos-text a, .pos-otazky details p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pos-detail img { width: 100%; height: auto; border-radius: 22px; }
.pos-kalk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px; align-items: start; padding: clamp(56px, 7vw, 96px) 0 0; scroll-margin-top: 24px; }
.pos-kalk-uvod p { max-width: 46ch; margin-top: 12px; color: var(--tlumeny); }
.pos-predvolby { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pos-predvolby button { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--linka); border-radius: 999px; background: #fff; color: var(--text); font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.pos-predvolby button[aria-pressed="true"] { border-color: #111; background: #111; color: #fff; }
.pos-kalk-karta { display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); border: 1.5px solid var(--linka); border-radius: 24px; }
.pos-kalk-karta .rada { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pos-vysledek { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.pos-vysledek strong { font-size: clamp(48px, 6vw, 72px); line-height: 1; letter-spacing: -0.04em; }
.pos-vysledek span { font-size: 20px; font-weight: 700; }
.pos-veta { color: var(--tlumeny); }
.pos-cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pos-cena strong { font-size: 24px; letter-spacing: -0.025em; }
.pos-cena span { font-size: 14.5px; color: var(--tlumeny); }
.pos-kalk-karta .tl { justify-self: start; }
.pos-kalk-karta .drobne { font-size: 13.5px; color: var(--tlumeny); }
.pos-kalk-karta .drobne a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.pos-pozor { max-width: 760px; padding: clamp(56px, 7vw, 96px) 0 0; }
.pos-pozor p { margin-top: 14px; color: #2b2b2b; }
.pos-otazky { max-width: 820px; padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); }
.pos-otazky .karty { display: grid; gap: 10px; margin-top: 22px; }
.pos-otazky details { border: 1.5px solid var(--linka); border-radius: 20px; background: #fff; transition: border-color var(--dur) var(--ease); }
.pos-otazky details[open] { border-color: #111; }
.pos-otazky summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px 20px 24px; font-weight: 700; font-size: 18px; letter-spacing: -0.015em; cursor: pointer; list-style: none; }
.pos-otazky summary::-webkit-details-marker { display: none; }
.pos-otazky summary span { position: relative; flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1.5px solid var(--linka); transition: transform var(--dur) var(--ease), background-color var(--dur), border-color var(--dur); }
.pos-otazky summary span::before, .pos-otazky summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: currentColor; }
.pos-otazky summary span::after { transform: rotate(90deg); }
.pos-otazky details[open] summary span { transform: rotate(45deg); background: #111; border-color: #111; color: #fff; }
.pos-otazky details p { max-width: 64ch; padding: 0 24px 22px; color: var(--tlumeny); }
@media (hover: hover) and (pointer: fine) {
  .pos-predvolby button:not([aria-pressed="true"]):hover { border-color: #111; }
  .pos-otazky details:not([open]):hover { border-color: #bbb; }
}
@media (max-width: 860px) {
  .pos-dvoji, .pos-kalk { grid-template-columns: minmax(0, 1fr); }
}