/* Sloučeno ze zdrojových souborů. Neupravovat ručně, editujte zdroj. */

@layer reset, tokens, base, layout, components, utilities;

@layer reset {
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Atribut hidden neúčinkuje na prvku, kterému CSS nastaví vlastní display.
   Do téhle pasti spadla kalkulačka konsolidace: skryté řádky i tlačítko
   zůstaly vidět, protože měly display: grid a inline-flex. Jednotlivé
   komponenty si to dosud řešily samy (.pcalc[hidden], .compare-tray[hidden]),
   což je jen odkládání stejné chyby. */
[hidden] {
  display: none !important;
}
}

@layer tokens {
/*
 * Barvy převzaté ze staré grafiky (css/custom.css, css/style.css) podle četnosti.
 * Hodnoty zůstávají, mění se jen text na nich — původní kombinace nesplňovaly
 * minimální kontrast 4,5:1.
 */
:root {
  /* --- převzaté --- */
  --c-primary:       #00bae1;   /* aktivní navigace, tlačítka vyhledávání (26x) */
  --c-primary-hover: #21c2e4;   /* hover jde světleji, ne tmavěji — tmavý text jinak nemá kontrast */
  --c-primary-dark:  #0a8ea0;   /* jen pro text a ikony na bílé, ne jako pozadí pod tmavým textem */
  --c-primary-050:   #e6f9fd;

  --c-ink:           #30336b;   /* tmavá textová, štítky (19x) */
  --c-ink-700:       #484a57;
  --c-ink-900:       #323648;

  /* původní #1884be mělo na bílé 4,13:1, ztmaveno o 6 % */
  --c-link:          #167cb2;   /* odkazy, kontakt, odběr novinek (18x) */
  --c-link-dark:     #126694;

  --c-cta:           #1dd1a1;   /* .bank-btn — hlavní konverzní tlačítko */
  --c-cta-hover:     #26d2a4;   /* hover jde světleji ze stejného důvodu */
  --c-cta-dark:      #16b489;   /* jen pro text a ikony na bílé */

  --c-text:          #333333;
  --c-border:        #dddddd;
  --c-border-svetly: #eeeeee;   /* vlásečnice uvnitř karet, slabší než okraj */
  --c-surface:       #ffffff;

  /* --- upravené kvůli kontrastu --- */
  /* původní #888888 mělo na bílé jen 3,54:1 */
  --c-muted:         #6b6b6b;
  /* pro velké popisky nad 24 px lze použít původní odstín */
  --c-muted-large:   #888888;

  /* --- doplněné --- */
  --c-surface-alt:   #f7f9fb;
  --c-danger:        #c0303b;
  --c-warning:       #8a5a00;
  --c-success:       #0c7254;

  /* Text NA barevných plochách. Bílá na --c-cta má 1,96:1, na --c-primary 2,30:1. */
  --c-on-cta:        var(--c-ink);
  --c-on-primary:    var(--c-ink);
  --c-on-ink:        #ffffff;

  /* --- typografie --- */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Stará grafika měla osm velikostí h2 (30–60 px) a tři h1, všechny s !important. */
  /* Na mobilu byl H1 přes 2 rem a zabíral šestinu obrazovky.
     Spodní mez je nově výrazně nižší, horní zůstává pro desktop. */
  --fs-900: clamp(1.55rem, 1.15rem + 1.8vw, 2.75rem);
  --fs-800: clamp(1.25rem, 1.05rem + 1.0vw, 2.00rem);
  --fs-700: clamp(1.10rem, 1.02rem + 0.4vw, 1.45rem);
  --fs-600: 1.15rem;
  --fs-500: 1rem;
  --fs-400: 0.9375rem;
  --fs-300: 0.8125rem;

  --lh-tight: 1.2;
  --lh-base:  1.6;

  /* --- rozměry --- */
  --radius:    5px;   /* dominantní ve staré grafice (30x) */
  --radius-lg: 10px;
  --radius-pill: 999px;

  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;

  --container: 1160px;

  --shadow-1: 0 1px 3px rgb(0 0 0 / 0.10);
  --shadow-2: 0 4px 16px rgb(0 0 0 / 0.12);

  --focus-ring: 3px solid var(--c-link);
}
}

@layer base {
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-500);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-surface);
}

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  color: var(--c-ink);
  font-weight: 600;
  text-wrap: balance;
}

h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); }

p { text-wrap: pretty; }

a { color: var(--c-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-link-dark); }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--c-ink);
  color: var(--c-on-ink);
  border-radius: var(--radius);
}

.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-6); }

/* Seznamy v obsahu z editoru. Platí všude, kde se vypisuje .prose, tedy
   v magazínu, u produktu, u poskytovatele i na stránkách.

   Odrážka je špička šipky složená ze dvou okrajů, ne obrázek. Roste tedy
   s velikostí písma a nepotřebuje soubor navíc. */
.prose ul,
.prose ol {
  list-style: none;
  padding-left: 0;
}
.prose li + li { margin-top: var(--space-3); }
.prose li > ul,
.prose li > ol { margin-top: var(--space-3); }

.prose ul > li {
  position: relative;
  padding-left: var(--space-6);
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-top: 2.4px solid var(--c-muted-large);
  border-right: 2.4px solid var(--c-muted-large);
  transform: rotate(45deg);
}

/* Číslovaný seznam nese číslo v kroužku, aby bylo poznat, že jde
   o pořadí, ne o výčet. */
.prose ol {
  counter-reset: polozka;
}
.prose ol > li {
  position: relative;
  padding-left: calc(var(--space-6) + var(--space-3));
  counter-increment: polozka;
}
.prose ol > li::before {
  content: counter(polozka);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-primary-050);
  color: var(--c-primary-dark);
  font-size: var(--fs-300);
  font-weight: 500;
}

/* Zástupný text ve všech polích je světlejší než vyplněná hodnota. */
input::placeholder,
textarea::placeholder {
  color: #9aa1ab;
  opacity: 1;
}
}

@layer layout {
.container {
  width: min(100% - 2 * var(--space-4), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--space-7); }




@media (min-width: 62rem) {
}
}

@layer components {
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--fs-400);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Hlavní konverzní tlačítko. Barva převzatá z .bank-btn, text ztmavený:
   bílá na #1dd1a1 měla kontrast 1,96:1, tmavá má 5,90:1. */
.button--cta {
  background: var(--c-cta);
  color: #fff;
}
/* Hover: ztmavení. */
.button--cta:hover { background: #12b184; border-color: #12b184; color: #fff; }

.button--primary {
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.button--primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; }


.button--ghost {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-ink);
}
.button--ghost:hover { border-color: var(--c-ink); color: var(--c-ink); background: var(--c-surface-alt); }

.button[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
}

@layer components {
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
}

.site-header__brand { display: flex; align-items: center; text-decoration: none; }
.site-header__brand img { width: auto; height: 30px; }

.site-header__toggle {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.site-header__toggle-bar,
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--c-ink);
}
.site-header__toggle-bar::before { transform: translateY(-6px); }
.site-header__toggle-bar::after  { transform: translateY(4px); }

.site-nav { display: none; }
.site-nav[data-open="true"] {
  display: block;
  position: absolute;
  inset: 64px 0 auto 0;
  padding: var(--space-4);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-1);
}

.site-nav__list { display: grid; gap: var(--space-2); }

.site-nav__link {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius);
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-400);
}
.site-nav__link:hover { color: var(--c-primary-dark); }

/* Aktivní položka: tmavě modrá linka pod textem, žádné pozadí. */
.site-nav__link { position: relative; border-radius: 0; }
.site-nav__link--current,
.site-nav__link[aria-current="page"],
.site-nav__link--current:hover { color: var(--c-ink); }
.site-nav__link--current::after,
.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: 4px;
  height: 2px;
  background: var(--c-ink);
  border-radius: 0;
}

@media (min-width: 48rem) {
  .site-header__toggle { display: none; }
  .site-nav { display: block; }
  .site-nav[data-open] { position: static; padding: 0; box-shadow: none; border: 0; }
  .site-nav__list { display: flex; gap: var(--space-1); }
}
}

@layer components {
/* Patička. Čtyři sloupce na desktopu, na mobilu rozbalovací sekce. */
.site-footer {
  margin-top: var(--space-8);
  padding-block: var(--space-6) var(--space-4);
  background: var(--c-ink);
  color: #e6e7f2;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

/* --- značka --- */
/* Logo pro tmavé pozadí: zelené G zůstává, modré J a „.cz" jsou bílé.
   Původní logo má J v tmavě modré, která by na patičce zanikla. */
.site-footer__brand { display: inline-block; }
.site-footer__brand img { width: auto; height: 40px; display: block; }
.site-footer__claim { margin-top: var(--space-2); font-size: var(--fs-300); color: #c5c6dd; line-height: 1.6; max-width: 36ch; }

.site-footer__chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-3); padding: 4px var(--space-3);
  background: rgb(255 255 255 / .08);
  border-radius: var(--radius-pill);
  font-size: var(--fs-300);
  color: #c5c6dd;
}
.site-footer__chip svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--c-cta); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.site-footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.site-footer__social-link {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  background: rgb(255 255 255 / .1);
  border-radius: 50%;
  color: #fff;
  transition: background-color .15s ease;
}
.site-footer__social-link:hover { background: rgb(255 255 255 / .2); }
.site-footer__social-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --- sloupce odkazů --- */
.site-footer__col { min-width: 0; }
.site-footer__heading {
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b8db5;
  margin-bottom: var(--space-2);
}
.site-footer__link {
  display: block;
  padding: 5px 0;
  font-size: var(--fs-400);
  color: #e6e7f2;
  text-decoration: none;
}
.site-footer__link:hover { color: #fff; text-decoration: underline; }

/* --- upozornění --- */
.site-footer__disclaimer {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: rgb(255 255 255 / .05);
  border-radius: var(--radius);
  font-size: var(--fs-300);
  color: #c5c6dd;
  line-height: 1.7;
}
.site-footer__disclaimer strong { color: #fff; }
.site-footer__disclaimer a { color: #fff; text-decoration: underline; }

/* --- spodní řádek --- */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgb(255 255 255 / .12);
  font-size: var(--fs-300);
  color: #c5c6dd;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.site-footer__legal .site-footer__link { padding: 0; font-size: var(--fs-300); }
.site-footer__updated { color: #8b8db5; }

@media (min-width: 40rem) {
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand-col { grid-column: 1 / -1; }
}

@media (min-width: 62rem) {
  .site-footer { padding-block: var(--space-7) var(--space-4); }
  .site-footer__top {
    grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }
  .site-footer__brand-col { grid-column: auto; }
}

/* Nahlásit chybu je tlačítko, protože otevírá okno, ne stránku.
   Vypadat má ale jako ostatní odkazy v patičce. */
.site-footer__link--btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
}

@layer components {
/* Karta produktu, varianta A.
   Desktop: logo vlevo zarovnané k názvu; druhý řádek přes celou šířku,
            údaje vlevo a tlačítko vpravo v jedné linii.
   Mobil:   logo a název v řádku, údaje jako seznam, dole ikony vlevo
            a tlačítko vpravo. */
.pcard {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-areas:
    "logo head"
    "body body"
    "calc calc";
  column-gap: var(--space-3);
  padding: var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: border-color .15s ease;
}
.pcard:hover { border-color: var(--c-ink-700); }

/* --- logo ---
   Na mobilu je vysoké jako obě řádky textu vedle něj (název a poskytovatel),
   proto align-self: center a pevná šířka sloupce. */
.pcard__logo-wrap { grid-area: logo; align-self: center; }
.pcard__logo-link { display: block; }
.pcard__logo-link:hover .pcard__logo { opacity: .75; }
.pcard__logo {
  width: 100%; max-width: 88px; height: auto; max-height: 46px;
  object-fit: contain; object-position: left center;
}
.pcard__logo--text {
  display: block; max-width: 88px;
  font-size: var(--fs-300); font-weight: 600; color: var(--c-ink-700); line-height: 1.2;
}

/* --- hlavička --- */
.pcard__head { grid-area: head; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.pcard__ident { min-width: 0; }
.pcard__title { font-size: var(--fs-600); font-weight: 600; line-height: 1.25; }
.pcard__title a { color: var(--c-text); text-decoration: none; }
.pcard__title a:hover { color: var(--c-ink); text-decoration: underline; }
.pcard__sub { margin-top: 2px; font-size: var(--fs-300); color: var(--c-muted); }
.pcard__stars { margin-left: var(--space-2); color: #e8a33d; letter-spacing: 1px; }

.pcard__badge {
  display: inline-block; margin-left: var(--space-2); padding: 1px var(--space-2);
  background: var(--c-border); border-radius: var(--radius-pill);
  font-size: var(--fs-300); font-weight: 600; color: var(--c-ink-700);
  vertical-align: middle; white-space: nowrap;
}

/* --- ikony --- */
.pcard__icons { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.pcard__icons--mobile { display: flex; }
.pcard__compare { display: flex; }
.pcard__icon {
  display: grid; place-items: center;
  width: 42px; min-height: 42px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-ink-700);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pcard__icon:hover { border-color: var(--c-ink); color: var(--c-ink); }
.pcard__icon[aria-pressed="true"],
.pcard__icon[aria-expanded="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.pcard__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --- tělo: údaje a akce --- */
.pcard__body {
  grid-area: body;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-border);
}

.pcard__facts { display: grid; grid-template-columns: 1fr; }
.pcard__fact {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-surface-alt);
  min-width: 0;
}
.pcard__fact:last-child { border-bottom: 0; }
.pcard__fact dt { display: inline-flex; align-items: center; font-size: var(--fs-400); color: var(--c-muted); }
.pcard__fact dd {
  font-size: var(--fs-500); font-weight: 600; color: var(--c-text);
  line-height: 1.2; font-variant-numeric: tabular-nums; text-align: right;
}
.pcard__na { color: var(--c-muted); font-weight: 400; font-size: var(--fs-400); }
.pcard__fact--note dd { font-weight: 400; font-size: var(--fs-400); color: var(--c-ink-700); text-align: left; }

.pcard__actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.pcard__cta { flex: 1; min-height: 42px; }

/* --- ukončené nabídky --- */
.pcard--off { background: var(--c-surface-alt); }
.pcard--off .pcard__logo { filter: grayscale(1); opacity: .7; }

@media (min-width: 48rem) {
  .pcard { grid-template-columns: 136px minmax(0, 1fr); column-gap: var(--space-5); padding: var(--space-5); }

  .pcard__logo-wrap { align-self: start; }
  .pcard__logo { max-width: 136px; max-height: 48px; }
  .pcard__logo--text { max-width: 136px; }

  /* Druhý řádek přes obě kolony: údaje vlevo, tlačítko vpravo. */
  .pcard__body {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
  }

  .pcard__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    flex: 1 1 auto;
    min-width: 0;
  }
  .pcard__fact {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
    border-bottom: 0;
  }
  .pcard__fact dt { font-size: var(--fs-300); white-space: nowrap; }
  .pcard__fact dd { font-size: var(--fs-600); text-align: left; }

  .pcard__actions { margin-top: 0; flex: 0 0 auto; }
  .pcard__icons--mobile { display: none; }
  .pcard__cta { flex: 0 0 auto; min-width: 10rem; }
}

@media (max-width: 47.99rem) {
  /* Na mobilu jsou ikony jen dole vedle tlačítka. */
  .pcard__head .pcard__icons { display: none; }
}
}

@layer components {
/* Vodorovný posuvník podkategorií. */
.subnav { margin-top: var(--space-4); margin-inline: calc(-1 * var(--space-4)); }

.subnav__list {
  display: flex;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.subnav__list::-webkit-scrollbar { display: none; }

.subnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-4);
  background: var(--c-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-400);
  color: var(--c-ink-700);
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background-color .15s ease, color .15s ease;
}
.subnav__link:hover { background: var(--c-border); color: var(--c-ink); }
.subnav__link--current { background: var(--c-ink); color: #fff; font-weight: 600; }
.subnav__link--current:hover { background: var(--c-ink-900); color: #fff; }

@media (min-width: 48rem) {
  .subnav { margin-inline: 0; }
  .subnav__list { flex-wrap: wrap; padding-inline: 0; overflow: visible; }
}
}

@layer components {
/* Pruh poskytovatelů přes celou šířku, s nadpisem. */
.trust {
  padding-block: var(--space-5);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.trust__title {
  font-size: var(--fs-400);
  font-weight: 400;
  color: var(--c-muted);
  text-align: center;
  margin-bottom: var(--space-4);
}
.trust__list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--space-2);
}
.trust__list::-webkit-scrollbar { display: none; }
.trust__list li { flex: 0 0 auto; }
.trust__logo {
  width: auto;
  height: 26px;
  max-width: 110px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .2s ease, opacity .2s ease;
}
.trust__list a:hover .trust__logo { filter: none; opacity: 1; }
.trust__more a { font-size: var(--fs-400); white-space: nowrap; }

@media (min-width: 48rem) {
  .trust__list { justify-content: center; flex-wrap: wrap; gap: var(--space-7); overflow: visible; }
  .trust__logo { height: 30px; max-width: 130px; }
}
}

@layer components {
/* Dlaždice kategorií. Dva sloupce i na nejužším mobilu. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.tile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: center;
  min-height: 76px;
  padding: var(--space-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
}
.tile:hover { border-color: var(--c-primary); background: var(--c-primary-050); }

.tile__icon {
  grid-row: 1 / span 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--c-primary-050);
  border-radius: var(--radius);
  color: var(--c-primary-dark);
}
.tile__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.tile__name { font-size: var(--fs-400); font-weight: 600; color: var(--c-ink); }
.tile__count { font-size: var(--fs-300); color: var(--c-muted); }

@media (min-width: 48rem) {
  .tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

/* --- dlaždice s číslem ---
   Základní .tile je stavěná na krátký popisek kategorie. Číslo s vysvětlením
   potřebuje víc místa a hlavně stejnou výšku u všech, jinak ikony plavou
   každá v jiné úrovni. */
.tiles--cisla {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: stretch;
}
.tiles--cisla > li {
  display: flex;
}
.tiles--cisla .tile {
  width: 100%;
  align-items: start;
  align-content: center;
  padding: var(--space-4);
  min-height: 88px;
}
.tiles--cisla .tile__icon {
  align-self: center;
}
.tiles--cisla .tile__name {
  font-size: var(--fs-700);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.tiles--cisla .tile__count {
  line-height: var(--lh-tight);
}

@media (max-width: 29.99em) {
  /* Na úzkém telefonu je jedno číslo na řádek čitelnější než dvě
     zmáčknutá vedle sebe. */
  .tiles--cisla {
    grid-template-columns: minmax(0, 1fr);
  }
}
}

@layer components {
/* Srovnávač produktů.
   Mřížka místo <table>, aby šlo přilepit záhlaví při rolování a na mobilu
   i první sloupec. Role tabulky nese HTML kvůli čtečkám. */
.srov__hlava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.srov__nadpis {
  font-size: var(--fs-800);
  letter-spacing: -0.02em;
  margin: 0;
}
.srov__pocet {
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.srov__popis {
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: var(--lh-base);
  margin: var(--space-2) 0 var(--space-5);
  max-width: 80ch;
}

/* --- přepínač zobrazení ---
   Dvě volby vedle sebe místo posuvného knoflíku. Skrývání dělá CSS,
   takže to funguje i bez JavaScriptu. */
.srov__volba {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.srov__filtr {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-surface-alt);
}
.srov__moznost {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--fs-400);
  color: var(--c-ink-700);
  cursor: pointer;
}
.srov__volba--vse:checked ~ .srov__filtr label[for="zobrazit-vse"],
.srov__volba--rozdily:checked ~ .srov__filtr label[for="zobrazit-rozdily"] {
  background: var(--c-ink);
  color: var(--c-on-ink);
}
.srov__volba:focus-visible ~ .srov__filtr {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.srov__napoveda {
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: var(--lh-base);
  margin: var(--space-3) 0 var(--space-5);
  max-width: 70ch;
}
.srov__volba--rozdily:checked ~ .srov__posuv .srov__radek--shodny {
  display: none;
}

/* --- rozvržení ---
   Sloupce mají stejnou šířku, takže se tři produkty vejdou bez rolování.
   Dřív mřížka rostla do šířky obsahu a nejdelší text si ukrojil, kolik
   chtěl, takže třetí produkt vypadl z obrazovky. */
/* Na desktopu se sloupce vejdou, takže tu není vodorovné rolování.
   Díky tomu může být řádek s produkty přilepený k horní hraně okna.
   Kdyby tu overflow bylo, sticky by se vztahovalo k téhle krabici
   a při rolování stránky by nefungovalo. */
.srov__posuv {
  overflow: visible;
}
.srov__obsah {
  min-width: 100%;
}
.srov__karty,
.srov__radek {
  display: grid;
  grid-template-columns: var(--sloupce, 150px 1fr);
  gap: var(--space-3);
}
.srov__karty {
  position: sticky;
  /* Web má nahoře vlastní přilepenou hlavičku vysokou 64 px. Bez tohohle
     odsazení se karty schovají pod ni a je vidět jen jejich spodek.
     Stejnou hodnotu používá i boční panel ve formuláři žádosti. */
  top: calc(64px + var(--space-2));
  /* Pod hlavičkou webu, ta má 20. Nad obsahem tabulky, který pod karty
     podjíždí. */
  z-index: 10;
  margin-bottom: var(--space-6);
  padding-block: var(--space-3);
  align-items: stretch;
  background: var(--c-surface);
}
/* Prázdné místo nad sloupcem s popisky, ať karty sedí nad hodnotami. */
.srov__karty-prazdno {
  min-height: 1px;
}

/* --- karta produktu --- */
.srov__karta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
.srov__hlavicka {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.srov__jmeno {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.srov__logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 104px;
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  overflow: hidden;
}
.srov__logo img {
  max-width: 88px;
  max-height: 34px;
  object-fit: contain;
}
.srov__monogram {
  font-size: var(--fs-600);
  font-weight: 500;
  color: var(--c-ink);
}
.srov__nazev {
  font-size: var(--fs-400);
  font-weight: 500;
  color: var(--c-ink);
  line-height: var(--lh-tight);
  text-decoration: none;
}
.srov__nazev:hover {
  color: var(--c-link-dark);
}
.srov__firma {
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.srov__akce {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.srov__akce form {
  display: contents;
}
.srov__cta {
  flex: 1 1 auto;
  text-align: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-300);
}
.srov__odebrat {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--c-muted-large);
  cursor: pointer;
}
.srov__odebrat:hover {
  background: var(--c-border);
  color: var(--c-ink);
}

/* --- skupina parametrů ---
   Stejný tvar jako tabulky na detailu produktu: nadpis nad kartou,
   uvnitř řádky oddělené světlou vlásečnicí. */
.srov__skupina {
  font-size: var(--fs-600);
  letter-spacing: -0.01em;
  margin: var(--space-6) 0 var(--space-3);
  /* Aby nadpis nezůstal schovaný pod hlavičkou webu i pod přilepenými
     kartami, když se na skupinu skočí odkazem. */
  scroll-margin-top: calc(64px + 150px);
}
.srov__tabulka {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding-inline: var(--space-5);
}
.srov__radek {
  align-items: center;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--c-border-svetly);
}
.srov__radek:last-child {
  border-bottom: 0;
}
.srov__popisek {
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: var(--lh-base);
}
.srov__hodnota {
  font-size: var(--fs-400);
  line-height: var(--lh-base);
}

/* --- hodnoty --- */
.srov__stitek {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-300);
  font-weight: 500;
}
.srov__stitek--ano {
  background: #e8fbf4;
  color: var(--c-success);
}
.srov__stitek--ne {
  background: #fdeceb;
  color: #a8202b;
}
.srov__chybi {
  color: var(--c-border);
}
/* Zvýrazňuje se jen nejnižší sazba. U ostatních parametrů nevíme,
   co je pro konkrétního člověka lepší, a nechceme to předstírat. */
.srov__hodnota--nej {
  font-weight: 500;
  color: var(--c-success);
}
.srov__nej {
  margin-left: var(--space-2);
  font-size: var(--fs-300);
  font-weight: 400;
  color: var(--c-success);
}

@media (max-width: 47.99em) {
  /* Na mobilu se roluje celý srovnávač najednou, karty i tabulky, aby
     sloupce zůstaly nad sebou zarovnané. */
  /* Na mobilu se roluje do strany, takže přilepení nahoře nefunguje
     a vypíná se. */
  .srov__posuv {
    overflow-x: auto;
  }
  .srov__obsah {
    min-width: 640px;
  }
  .srov__karty {
    position: static;
  }
  .srov__karty,
  .srov__radek {
    gap: var(--space-2);
  }
  .srov__nadpis {
    font-size: var(--fs-700);
  }
}

/* Plovoucí lišta „N produktů ve srovnání".
   Tmavá plocha přes celou šířku splývala s patičkou, proto je z toho
   plovoucí karta na světlém podkladu se stínem, odsazená od hrany. */
.compare-tray {
  position: fixed;
  inset: auto 0 var(--space-5) 0;
  z-index: 30;
  width: min(680px, calc(100% - var(--space-5) * 2));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.compare-tray__text {
  min-width: 0;
}
.compare-tray__count {
  display: block;
  font-size: var(--fs-500);
  font-weight: 500;
  color: var(--c-ink);
}
.compare-tray__hint {
  display: block;
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin-top: var(--space-1);
}
.compare-tray__cta {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
.compare-tray__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--c-muted-large);
  cursor: pointer;
}
.compare-tray__close:hover {
  background: var(--c-surface-alt);
  color: var(--c-ink);
}
.compare-tray__close .ikona {
  width: 17px;
  height: 17px;
}

@media (max-width: 30em) {
  .compare-tray {
    inset: auto var(--space-3) var(--space-3) var(--space-3);
    width: auto;
    padding: var(--space-4);
    gap: var(--space-3);
  }
  .compare-tray__hint {
    display: none;
  }
  .compare-tray__cta {
    padding-inline: var(--space-4);
  }
}

@media print {
  .srov__posuv { overflow: visible; }
  .compare-tray, .site-header, .site-footer { display: none; }
}
}

@layer components {
/* Posuvník částky. Jeden vzhled pro hero, kartu produktu i formulář žádosti.
 *
 * Nativní prvek je průhledný a slouží jen k ovládání. Dráhu i jezdec kreslí
 * obal. Vnitřní části posuvníku (::-webkit-slider-runnable-track a spol.)
 * se v prohlížečích chovají různě: umí si přepsat výšku, ignorovat
 * průhlednost i vykreslit vlastní podklad. Když je nepoužijeme vůbec,
 * nemají co rozbít.
 */
.uslider-wrap {
  --fill: 50%;
  --fill-n: 0.5;
  --uslider-thumb: 26px;
  position: relative;
  display: block;
  width: 100%;
  height: 32px;
}

/* dráha */
.uslider-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: linear-gradient(to right, var(--c-ink) var(--fill), var(--c-border) var(--fill));
  pointer-events: none;
}

/* Jezdec. Nativní posuvník posouvá střed jezdce od poloviny jeho šířky
   po šířku dráhy zmenšenou o polovinu jezdce, ne od nuly do sta procent.
   Proto poměr --fill-n (0 až 1) místo procent: jinak by jezdec na krajích
   ujížděl o půlku své šířky. */
.uslider-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--uslider-thumb) / 2 + (100% - var(--uslider-thumb)) * var(--fill-n, 0.5));
  width: var(--uslider-thumb);
  height: var(--uslider-thumb);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--c-cta);
  border: 3px solid var(--c-surface);
  box-shadow: 0 0 0 1px var(--c-border);
  pointer-events: none;
}

/* Nativní prvek zůstává nad grafikou kvůli ovládání, ale je neviditelný. */
.uslider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  opacity: 0;
  cursor: pointer;
}
.uslider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--uslider-thumb, 26px);
  height: var(--uslider-thumb, 26px);
}
.uslider::-moz-range-thumb { width: 26px; height: 26px; border: 0; }

.uslider-wrap:focus-within::after { box-shadow: 0 0 0 3px var(--c-ink); }

/* Jemné pulzování, dokud se návštěvník posuvníku nedotkne. */
@keyframes uslider-pulz {
  0%   { box-shadow: 0 0 0 1px var(--c-border), 0 0 0 0 rgb(29 209 161 / .5); }
  70%  { box-shadow: 0 0 0 1px var(--c-border), 0 0 0 12px rgb(29 209 161 / 0); }
  100% { box-shadow: 0 0 0 1px var(--c-border), 0 0 0 0 rgb(29 209 161 / 0); }
}
.uslider-wrap--pulse::after { animation: uslider-pulz 1.9s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .uslider-wrap--pulse::after { animation: none; }
}
}

@layer components {
.hero {
  position: relative;
  padding-block: var(--space-5) 0;
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
}

.hero__text { padding-bottom: var(--space-6); position: relative; }

.hero__text { min-width: 0; }

.hero__title { max-width: 18ch; }
.hero__lead {
  margin-top: var(--space-2);
  max-width: 42ch;
  font-size: var(--fs-500);
  color: var(--c-ink-700);
}

/* --- kalkulačka částky --- */
.calc {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

.calc__label { display: block; font-size: var(--fs-300); color: var(--c-muted); margin-bottom: var(--space-2); }

.calc__row { display: flex; align-items: center; gap: var(--space-4); }

/* Posuvník používá sdílenou třídu .uslider ze slider.css. */
.calc__slider-wrap { flex: 1; min-width: 0; }
.calc__slider-wrap .uslider-wrap { width: 100%; }

/* --- pole vpravo --- */
.calc__field {
  display: flex; align-items: center; gap: var(--space-2);
  flex: 0 0 auto;
  padding: 0 var(--space-3);
  height: 46px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.calc__field:focus-within { border-color: var(--c-ink); }
.calc__input {
  width: 6.5rem;
  border: 0; padding: 0;
  font-size: var(--fs-600); font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  text-align: right;
  background: transparent;
}
.calc__input:focus-visible { outline: none; }
.calc__currency { font-size: var(--fs-400); color: var(--c-muted); }

.calc__presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.calc__preset {
  min-height: 34px;
  padding: 0 var(--space-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-300);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-700);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.calc__preset:hover { border-color: var(--c-ink); color: var(--c-ink); }
.calc__preset--active { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 600; }
.calc__preset--active:hover { background: var(--c-ink-900); border-color: var(--c-ink-900); color: #fff; }

.calc__submit { width: 100%; margin-top: var(--space-4); min-height: 46px; }

/* --- úvodní obrázek --- */
/* Na mobilu se obrázek neukazuje: pod kalkulačkou nedává smysl
   a odsouvá obsah. Na širších obrazovkách stojí vedle ní. */
.hero__media { display: none; }
.hero__media img {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-inline: auto;
  display: block;
  /* Postava dosedá na spodní hranu sekce, sekce nemá spodní odsazení. */
}

@media (min-width: 48rem) {
  .hero { padding-block: var(--space-7) 0; }
  .hero__text { padding-bottom: var(--space-8); }
  .calc { max-width: 30rem; }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-7);
  }
  /* Bez fotografie zabírá text jen levou polovinu, aby řádky nebyly příliš dlouhé. */
  .hero--plain .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero--plain .hero__text { max-width: 34rem; }
  .hero__media { display: block; margin-top: 0; align-self: end; line-height: 0; }
  .hero--plain .hero__media { display: none; }
  .hero__media img { max-width: none; display: block; margin-inline: 0 auto; }
}
}

@layer components {
.listing { display: grid; gap: var(--space-4); margin-top: var(--space-5); }

.listing-count {
  margin-top: var(--space-4);
  font-size: var(--fs-400);
  color: var(--c-muted);
}

.empty-state {
  margin-top: var(--space-5);
  padding: var(--space-6);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--c-ink-700);
}

/* Úvodní odstavec stránky. Dřív se jmenoval .lead a kolidoval
   s blokem formuláře žádosti, kterému omezoval šířku. */
.perex { font-size: var(--fs-600); color: var(--c-ink-700); max-width: 60ch; }

.breadcrumbs {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin-bottom: var(--space-3);
}
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-ink); text-decoration: underline; }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.section__title { font-size: var(--fs-700); }
.section__more { font-size: var(--fs-400); white-space: nowrap; }

/* --- hlavička výpisu --- */
.listing-head {
  padding-block: var(--space-5) var(--space-4);
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
}
.listing-head h1 { margin-top: var(--space-2); }
.listing-head__lead {
  margin-top: var(--space-2);
  max-width: 60ch;
  font-size: var(--fs-500);
  color: var(--c-ink-700);
}
.listing-head .subnav { margin-top: var(--space-4); }

.listing-body { padding-top: var(--space-5); }
.listing-intro { margin-top: var(--space-7); }

/* --- nástroje: částka a řazení --- */
.listing-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  padding: var(--space-3) var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
/* min-width: 0 je tu podstatné: pružná položka se jinak nezúží pod šířku
   svého obsahu a výběr s dlouhou volbou („Doporučené pořadí") roztáhne
   celý řádek za okraj obrazovky. */
.listing-tools__group { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 140px; min-width: 0; }
.listing-tools__label { font-size: var(--fs-300); color: var(--c-muted); }

.listing-tools__amount { display: flex; align-items: center; gap: var(--space-2); }
.listing-tools__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: var(--fs-500);
  font-variant-numeric: tabular-nums;
}
.listing-tools__unit { font-size: var(--fs-400); color: var(--c-muted); }

.listing-tools__select {
  max-width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: var(--fs-400);
}

.listing-tools__reset { font-size: var(--fs-400); align-self: center; }

@media (min-width: 48rem) {
  .listing-tools__group { flex: 0 1 220px; }
}

/* Upozornění nad výpisem, například k přepočtu RPSN u mikropůjček. */
.notice {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: #fdf0d9;
  border-left: 3px solid #e8a33d;
  font-size: var(--fs-400);
  color: var(--c-ink-900);
  line-height: 1.5;
}
}

@layer components {
.article-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.article-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.article-card:hover { box-shadow: var(--shadow-1); }

.article-card__media { display: block; aspect-ratio: 16 / 9; background: var(--c-primary-050); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }

.article-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.article-card__title { font-size: var(--fs-600); }
.article-card__title a { color: var(--c-ink); text-decoration: none; }
.article-card__title a:hover { text-decoration: underline; }
.article-card__excerpt { font-size: var(--fs-400); color: var(--c-ink-700); }
.article-card__date { font-size: var(--fs-300); color: var(--c-muted); margin-top: auto; }

.article-detail { max-width: 76ch; }
.article-detail__title { margin-bottom: var(--space-3); }
.article-detail__meta { font-size: var(--fs-300); color: var(--c-muted); margin-bottom: var(--space-5); }
.article-detail__image { width: 100%; border-radius: var(--radius-lg); margin-bottom: var(--space-6); }
.article-detail__body h2 { margin-top: var(--space-6); }

.preview-bar {
  padding: var(--space-3) var(--space-4);
  background: var(--c-warning);
  color: #fff;
  font-size: var(--fs-400);
  text-align: center;
}

/* --- nabídky pod článkem --- */
.cnab {
  max-width: 940px;
  margin-inline: auto;
}
.cnab__nadpis {
  font-size: var(--fs-700);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
.cnab__popis {
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: var(--lh-base);
  margin: 0 0 var(--space-4);
  max-width: 70ch;
}
.cnab__seznam {
  margin-top: 0;
}
}

@layer components {
/* Posuvník článků na titulní straně.
   Vodorovné posouvání s přichytáváním, šipky u nadpisu a poslední karta
   vede do archivu. Bez JavaScriptu funguje posouvání prstem i kolečkem. */
.aslider { padding-block: var(--space-6) var(--space-7); }

.aslider__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.aslider__nav { display: flex; align-items: center; gap: var(--space-2); }
.aslider__all { font-size: var(--fs-400); white-space: nowrap; margin-right: var(--space-2); }

.aslider__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 50%;
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
.aslider__arrow:hover:not(:disabled) { border-color: var(--c-ink); background: var(--c-surface-alt); }
.aslider__arrow:disabled { opacity: .35; cursor: default; }
.aslider__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Stopa je uvnitř kontejneru, takže levá hrana sedí s nadpisem.
   Vpravo přesahuje až k okraji obrazovky, aby bylo vidět, že seznam
   pokračuje. Nezávisí to na konkrétní šířce kontejneru. */
.aslider__track {
  display: flex;
  gap: var(--space-4);
  margin-inline-end: calc(50% - 50vw);
  padding-inline-end: calc(50vw - 50%);
  padding-block: var(--space-1) var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.aslider__track::-webkit-scrollbar { display: none; }
.aslider__track:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }

.acard {
  flex: 0 0 auto;
  width: min(76vw, 300px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .15s ease;
}
.acard:hover { border-color: var(--c-ink-700); }

.acard__media { display: block; aspect-ratio: 16 / 9; background: var(--c-primary-050); }
.acard__media img { width: 100%; height: 100%; object-fit: cover; }

.acard__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.acard__meta { font-size: var(--fs-300); color: var(--c-muted); }
.acard__sep { margin-inline: 4px; }
.acard__title { font-size: var(--fs-500); line-height: 1.3; }
.acard__title a { color: var(--c-text); text-decoration: none; }
.acard__title a:hover { color: var(--c-ink); text-decoration: underline; }
.acard__perex { font-size: var(--fs-400); color: var(--c-ink-700); }

/* Poslední karta je přechod do archivu. */
.acard--archive {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--c-surface-alt);
  border-style: dashed;
  text-decoration: none;
  text-align: left;
}
.acard--archive:hover { background: var(--c-primary-050); border-color: var(--c-primary); }
.acard__archive-icon { display: block; color: var(--c-primary-dark); }
.acard__archive-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.acard__archive-title { font-size: var(--fs-600); font-weight: 600; color: var(--c-ink); }
.acard__archive-note { font-size: var(--fs-300); color: var(--c-muted); }

/* Tažením myší, protože kolečko posouvá svisle. */
.aslider__track { cursor: grab; }
.aslider__track--drag { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.aslider__track--drag a { pointer-events: none; }

@media (min-width: 48rem) {
  .acard { width: 320px; }
}
}

@layer components {
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-7);
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: var(--fs-400);
  color: var(--c-ink);
  text-decoration: none;
}
.pagination__link:hover { background: var(--c-primary-050); color: var(--c-ink); }

.pagination__link--current {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: 600;
}

.pagination__link--current:hover { background: var(--c-primary); color: var(--c-on-primary); }
.pagination__gap { color: var(--c-muted); padding: 0 var(--space-1); }
}

@layer components {
.faq { margin-top: var(--space-7); }
.faq__heading { margin-bottom: var(--space-4); }

.faq__item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
}

.faq__question {
  padding: var(--space-4);
  font-weight: 600;
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: "+"; float: right; color: var(--c-primary-dark); }
.faq__item[open] .faq__question::after { content: "−"; }

.faq__answer { padding: 0 var(--space-4) var(--space-4); color: var(--c-ink-700); }
}

@layer components {
/* Detail produktu: hlavní sloupec + boční souhrn, na desktopu přilepený. */
.detail__crumbs { padding-top: var(--space-4); }
.callout { padding: var(--space-3) var(--space-4); border-left: 3px solid; border-radius: 0; }
.callout__label { font-size: var(--fs-300); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.callout__text { margin-top: 2px; font-size: var(--fs-400); color: var(--c-text); }
.callout--good  { background: #e7f4e9; border-color: #3ab54a; }
.callout--good .callout__label  { color: #256b2e; }
.callout--promo { background: #fdf0d9; border-color: #e8a33d; }
.callout--promo .callout__label { color: #7a4708; }

/* Parametry produktu. Popisek vlevo, hodnota vpravo, mezi řádky vlásečnice,
   celé v jedné kartě. Dřív to byly holé řádky bez rámu a hodnoty se ztrácely. */
.spec {
  display: grid;
  gap: 0 var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-1) var(--space-5);
  margin: 0;
}
.spec__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-border-svetly);
  font-size: var(--fs-400);
}
/* Poslední řádek ve sloupci nemá spodní linku. Při dvou sloupcích jsou
   v posledním řádku mřížky buď dvě položky (sudý počet), nebo jedna. */
.spec__row:last-child,
.spec__row:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}
.spec__key {
  color: var(--c-muted);
  flex: 0 1 auto;
}
.spec__val {
  color: var(--c-text);
  font-weight: 500;
  text-align: right;
}
/* Ano a ne jsou štítky, ne obarvené slovo v prázdném řádku. */
.spec__val--yes,
.spec__val--no {
  font-weight: 500;
  font-size: var(--fs-300);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
}
.spec__val--yes {
  background: #e8fbf4;
  color: var(--c-success);
}
.spec__val--no {
  background: #fdeceb;
  color: #a8202b;
}

/* --- podobné produkty --- */
.detail__similar { padding-block: var(--space-6) var(--space-7); background: var(--c-surface-alt); border-top: 1px solid var(--c-border); }
.detail__similar .listing { margin-top: var(--space-4); }

@media (min-width: 48rem) {
  .spec { grid-template-columns: 1fr 1fr; }
}

/* --- kontaktní stránka --- */
.kont {
  max-width: 940px;
  margin-inline: auto;
}
.kont__nadpis {
  font-size: var(--fs-800);
  letter-spacing: -0.02em;
  margin: var(--space-5) 0 var(--space-6);
}
.kont__mrizka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-7);
  align-items: start;
}
.kont__text {
  min-width: 0;
}
.kont__form {
  margin: 0;
}
.kont__udaje {
  margin: var(--space-5) 0;
}
.kont__udaj {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-border-svetly);
}
.kont__udaj dt {
  flex: 0 0 150px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.kont__udaj dt .ikona {
  color: var(--c-muted-large);
}
.kont__udaj dd {
  margin: 0;
  font-size: var(--fs-400);
}
.kont__adresa {
  white-space: pre-line;
  line-height: var(--lh-base);
}
.kont__prose {
  font-size: var(--fs-400);
  color: var(--c-ink-700);
}
.kont__pozn {
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: var(--lh-base);
  margin-top: var(--space-5);
}
.kont__pozn--pod {
  text-align: center;
  margin-top: var(--space-3);
}

.kont__panel {
  background: var(--c-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.kont__panel-nadpis {
  font-size: var(--fs-600);
  margin: 0 0 var(--space-4);
}
.kont__label {
  display: block;
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin-bottom: var(--space-2);
}
.kont__vstup {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  font: inherit;
  margin-bottom: var(--space-4);
}
.kont__vstup:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}
.kont__odeslat {
  width: 100%;
  text-align: center;
}
.kont__chyba {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: #fdeceb;
  color: #a8202b;
  font-size: var(--fs-400);
  margin: 0 0 var(--space-4);
}
.kont__chybicka {
  font-size: var(--fs-300);
  color: #a8202b;
  margin: calc(var(--space-4) * -1) 0 var(--space-4);
}
.kont__hotovo {
  font-size: var(--fs-400);
  color: var(--c-ink-700);
  line-height: var(--lh-base);
  margin: 0;
}
/* Návnada na roboty. Nesmí zmizet přes display:none, část robotů
   takové pole pozná a přeskočí ho. */
.kont__navnada {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 47.99em) {
  .kont__mrizka {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .kont__udaj {
    flex-direction: column;
    gap: var(--space-1);
  }
}

/* --- stránka Jak srovnáváme --- */
.jaks {
  max-width: 720px;
  margin-inline: auto;
  /* Barva textu sedí na obalu, ne na odstavcích. Pravidlo .jaks p
     s barvou by přebíjelo barvy komponent uvnitř. */
  color: var(--c-ink-700);
}
.jaks__nadpis {
  color: var(--c-ink);
  font-size: var(--fs-800);
  letter-spacing: -0.02em;
  margin: var(--space-5) 0 var(--space-4);
}
.jaks__perex {
  margin-bottom: var(--space-5);
}
/* Dlaždice přehledu jsou komponenta .tiles z titulní strany, tady se
   jen nastaví odstup pod blokem. */
.jaks__cisla {
  margin-bottom: var(--space-7);
  padding: 0;
  list-style: none;
}
/* Údaj, který nikam nevede, nemá reagovat na najetí. */
.tile--staticka {
  cursor: default;
}
.tile--staticka:hover {
  border-color: var(--c-border);
  background: var(--c-surface);
}
.jaks__podnadpis {
  color: var(--c-ink);
  font-size: var(--fs-600);
  letter-spacing: -0.01em;
  margin: var(--space-7) 0 var(--space-3);
}
.jaks p {
  font-size: var(--fs-400);
  line-height: var(--lh-base);
  margin: 0 0 var(--space-4);
}
.jaks__prose {
  margin-top: var(--space-6);
}
.jaks__pozn {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border-svetly);
  font-size: var(--fs-300);
  color: var(--c-muted);
}

/* --- stránka Kolik stojí půjčka ---
   Plná šířka kontejneru jako na titulce. Text si drží čitelnou délku
   řádku sám, na to není potřeba zužovat celou stránku. */
.trh__nadpis {
  color: var(--c-ink);
  font-size: var(--fs-800);
  letter-spacing: -0.02em;
  margin: var(--space-5) 0 var(--space-4);
}
.trh__podnadpis {
  color: var(--c-ink);
  font-size: var(--fs-600);
  letter-spacing: -0.01em;
  margin: var(--space-7) 0 var(--space-3);
}
.trh {
  color: var(--c-ink-700);
}
/* Omezení délky řádku platí pro text, ne pro řádky s čísly. Ty jsou taky
   odstavce a pravidlo je usekávalo v 57 % šířky, zatímco pruh šel přes
   celou. */
.trh__perex,
.trh > p {
  max-width: 70ch;
}
.trh p {
  font-size: var(--fs-400);
  line-height: var(--lh-base);
  margin: 0 0 var(--space-4);
}
.trh__perex {
  margin-bottom: var(--space-5);
}
/* Poznámka pod blokem je bez linky. Ta se sem připletla ze stránky
   Jak srovnáváme a dělala na stránce tři vodorovné čáry, které nic
   neoddělovaly. */
.trh__pozn {
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: var(--lh-base);
  max-width: 70ch;
  margin: var(--space-3) 0 0;
}

/* --- kalkulačka trhu ---
   Táhla vlevo, výsledek vpravo. Bez JavaScriptu počítá server a formulář
   se odesílá tlačítkem, s ním se tlačítko schová. */
.trhk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-6);
  align-items: start;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-3);
}
.trhk__zadani {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.trhk__pole {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.trhk__popis {
  grid-column: 1 / -1;
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.trhk__hodnota {
  font-size: var(--fs-500);
  font-weight: 500;
  white-space: nowrap;
}
.trhk__potvrdit {
  align-self: start;
}
.trhk__vysledek {
  border-left: 1px solid var(--c-border-svetly);
  padding-left: var(--space-6);
}
.trhk__splatka {
  font-size: var(--fs-800);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  white-space: nowrap;
}
.trhk__mesicne {
  font-size: var(--fs-400);
  font-weight: 400;
  color: var(--c-muted);
  letter-spacing: 0;
}
.trhk__meze {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: var(--space-2) 0 var(--space-4);
}
.trhk__udaje {
  margin: 0;
}
.trhk__udaje > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-top: 1px solid var(--c-border-svetly);
  font-size: var(--fs-300);
}
.trhk__udaje dt {
  color: var(--c-muted);
}
.trhk__udaje dd {
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}
.trhk__prazdno {
  font-size: var(--fs-400);
  color: var(--c-ink-700);
  margin: 0;
}
.trhk__cta {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 47.99em) {
  .trhk {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
    gap: var(--space-5);
  }
  .trhk__vysledek {
    border-left: 0;
    border-top: 1px solid var(--c-border-svetly);
    padding-left: 0;
    padding-top: var(--space-4);
  }
  .trhk__cta {
    justify-self: stretch;
    text-align: center;
  }
}

/* --- škála rozptylu ---
   Ukazuje, jak daleko od sebe nabídky jsou. V číslech to zaniká: u malé
   půjčky na rok je rozdíl mezi nejlevnější a nejdražší pár desítek korun,
   u velké na pět let stovky. */

/* Škála jde od nejlevnější po nejdražší nabídku, značka sedí na
   prostřední hodnotě. */
.trh__skala {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #d9f0dc, #f6e3c8);
}
.trh__znacka {
  position: absolute;
  top: -5px;
  width: 3px;
  height: 16px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--c-ink);
}

/* --- nejlevnější a nejdražší --- */
.trh__kraje {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}
.trh__zadani {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: 0 0 var(--space-2);
}
.trh__sazba {
  font-size: var(--fs-600);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
.trh__produkt {
  margin: 0;
  font-size: var(--fs-400);
}
.trh__produkt a {
  font-weight: 500;
}
.trh__firma {
  display: block;
  font-size: var(--fs-300);
  color: var(--c-muted);
}

/* --- tabulka rozložení sazeb --- */
.trh__tabulka {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.trh__zahlavi,
.trh__radek {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(3, 1fr) 90px;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  align-items: baseline;
}
.trh__zahlavi {
  background: var(--c-surface-alt);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.trh__radek {
  border-bottom: 1px solid var(--c-border-svetly);
  font-size: var(--fs-400);
}
.trh__radek:last-child {
  border-bottom: 0;
}
.trh__stred {
  font-weight: 500;
}
.trh__pocet {
  color: var(--c-muted);
}

@media (max-width: 47.99em) {
  .trh__zahlavi {
    display: none;
  }
  .trh__radek {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1) var(--space-3);
  }
  .trh__nazev {
  display: flex;
  align-items: center;
  gap: var(--space-2);
    grid-column: 1 / -1;
    font-weight: 500;
  }
}

/* --- formulář výběru podle situace ---
   Zbylo po kalkulačce konsolidace, která na tenhle vzhled stála. Kalkulačka
   se přepsala, výběr ho používá dál. */

/* --- výběr podle situace ---
   Stejný vzorec jako obě kalkulačky: zadání nahoře, výsledky pod ním.
   Podmínky jsou přepínatelné štítky, ne zaškrtávátka, aby řádek vypadal
   jako ovládání, ne jako dotazník. */
.vyb__zadani {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.vyb__rada {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.vyb__pole {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.vyb__popis {
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.vyb__hodnota {
  font-size: var(--fs-700);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.vyb__volby {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.vyb__podminky {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border-svetly);
}
.vyb__stitek {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-300);
  color: var(--c-ink-700);
  cursor: pointer;
}
.vyb__stitek:hover {
  border-color: var(--c-ink);
}
.vyb__stitek--aktivni {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-ink);
}
/* Bez JavaScriptu odesílá formulář tlačítko, s ním se schová. */
.vyb__potvrdit {
  margin-top: var(--space-5);
}
.vyb__hlava {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.vyb__pocet {
  font-size: var(--fs-500);
  font-weight: 500;
  margin: 0;
}
.vyb__razeni {
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.vyb__seznam {
  margin-bottom: var(--space-5);
}

@media (max-width: 47.99em) {
  .vyb__rada {
    grid-template-columns: minmax(0, 1fr);
  }
  .vyb__zadani {
    padding: var(--space-4);
  }
}

/* --- nejlevnější nabídky pod kalkulačkou ---
   Tři dlaždice, první zvýrazněná. Víc se jich sem nevejde: u velké částky
   projde výběrem většina katalogu a deset dlaždic by kalkulačku pohřbilo. */
.trhk__seznam-obal {
  grid-column: 1 / -1;
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-border-svetly);
}
.trhk__seznam-nadpis {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: 0 0 var(--space-3);
}
.trhk__seznam {
  display: grid;
  /* auto-fill, ne auto-fit: jediná nabídka se jinak roztáhne přes celou
     šířku a tlačítko v ní vypadá jako pruh přes stránku. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trhk__karta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.trhk__karta--nej {
  border-color: #cfe9d6;
  background: #f8fdf9;
}
.trhk__karta-hlava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.trhk__logo {
  display: grid;
  place-items: center;
  height: 30px;
}
.trhk__logo img {
  max-width: 100px;
  max-height: 28px;
  object-fit: contain;
}
.trhk__monogram {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-surface-alt);
  font-size: var(--fs-400);
  font-weight: 500;
  color: var(--c-muted-large);
}
.trhk__stitek {
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: #0c7254;
  font-size: var(--fs-200, 12px);
  color: #fff;
  white-space: nowrap;
}
.trhk__cena {
  font-size: var(--fs-600);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.trhk__mesicne {
  font-size: var(--fs-300);
  font-weight: 400;
  color: var(--c-muted);
  letter-spacing: 0;
}
.trhk__popisek {
  display: block;
  font-size: var(--fs-400);
  margin: var(--space-2) 0 var(--space-4);
}
.trhk__rpsn {
  display: block;
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.trhk__tlacitko {
  margin-top: auto;
  text-align: center;
}
.trhk__vsechny {
  font-size: var(--fs-300);
  margin: var(--space-3) 0 0;
}

/* --- kalkulačka konsolidace ---
   Zadání v pruhu nahoře, pod ním dvě karty proti sobě. Doba se nenastavuje
   předem, mění se předvolbami pod výsledkem. */
.konsk__zadani {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.konsk__zahlavi,
.konsk__radek {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2) var(--space-3);
}
.konsk__zahlavi {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin-bottom: var(--space-2);
}
.konsk__radek {
  margin-bottom: var(--space-3);
}
.konsk__vstup {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font: inherit;
}
.konsk__vstup:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}
/* Odvozený úrok u řádku. Kontrola, že zadání sedí. */
.konsk__sazba {
  grid-column: 1 / -1;
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: var(--lh-tight);
}
.konsk__sazba--chyba {
  color: var(--c-warning);
}
.konsk__spodek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-border-svetly);
}
.konsk__pridat {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-300);
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.konsk__pridat:hover {
  color: var(--c-link-dark);
}
.konsk__potvrdit {
  margin-left: auto;
}
.konsk__vyzva {
  font-size: var(--fs-300);
  color: var(--c-ink-700);
  border-left: 3px solid var(--c-warning);
  padding-left: var(--space-3);
  margin: var(--space-3) 0 0;
}
.konsk__prazdno {
  font-size: var(--fs-400);
  color: var(--c-ink-700);
}

/* --- dnes proti stavu po spojení --- */
.konsk__srovnani {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: stretch;
  margin-bottom: var(--space-3);
}
.konsk__karta {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.konsk__karta--nova {
  border-color: #cfe9d6;
  background: #f8fdf9;
}
.konsk__nadpis-karty {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: 0 0 var(--space-3);
}
.konsk__karta--nova .konsk__nadpis-karty {
  color: #0c7254;
}
.konsk__castka {
  font-size: var(--fs-800);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
}
.konsk__mesicne {
  font-size: var(--fs-300);
  font-weight: 400;
  color: var(--c-muted);
  letter-spacing: 0;
}
.konsk__radky-karty {
  margin: var(--space-4) 0 0;
}
.konsk__radky-karty > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-top: 1px solid var(--c-border-svetly);
  font-size: var(--fs-300);
}
.konsk__karta--nova .konsk__radky-karty > div {
  border-color: #d9ecdf;
}
.konsk__radky-karty dt {
  color: var(--c-muted);
}
.konsk__radky-karty dd {
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}
.konsk__sipka {
  align-self: center;
  color: var(--c-muted-large);
  font-size: var(--fs-600);
}

/* --- závěr --- */
.konsk__zaver {
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-500);
  margin: 0 0 var(--space-4);
}
.konsk__zaver--dobre {
  background: #f4fbf6;
  color: #0c7254;
}
.konsk__zaver--pozor {
  background: #fdf7f0;
  border-left: 3px solid var(--c-warning);
  color: var(--c-ink-700);
}
.konsk__vyhrada {
  display: block;
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin-top: var(--space-1);
}

/* --- jiná doba ---
   Předvolby místo táhla. Táhlo přeskakovalo při psaní a mělo jiný strop
   než pole se splátkami. */
.konsk__jinak {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.konsk__jinak-popis {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin-right: var(--space-2);
}
.konsk__volba {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  font: inherit;
  font-size: var(--fs-300);
  color: var(--c-ink-700);
  cursor: pointer;
}
.konsk__volba:hover {
  border-color: var(--c-ink);
}
.konsk__volba--aktivni {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-ink);
}
.konsk__nabidky {
  margin-bottom: var(--space-6);
}

@media (max-width: 47.99em) {
  .konsk__zahlavi {
    display: none;
  }
  .konsk__radek {
    grid-template-columns: 1fr;
  }
  .konsk__srovnani {
    grid-template-columns: minmax(0, 1fr);
  }
  .konsk__sipka {
    transform: rotate(90deg);
    justify-self: center;
  }
  .konsk__zadani {
    padding: var(--space-4);
  }
}

/* --- formulář výběru podle situace ---
   Zbylo po kalkulačce konsolidace, která na tenhle vzhled stála. Kalkulačka
   se přepsala, výběr ho používá dál. */

/* --- výběr podle situace --- */

/* Dlaždice s číslem vede na stránku, kde to číslo vzniklo. */
/* Nahlášení chyby je tlačítko, protože otevírá okno, ne stránku. */
.jaks__nahlasit {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.jaks__nahlasit:hover {
  color: var(--c-link-dark);
}

/* --- nejlevnější nabídky pod kalkulačkou ---
   Tři dlaždice, první zvýrazněná. Víc se jich sem nevejde: u velké částky
   projde výběrem většina katalogu a deset dlaždic by kalkulačku pohřbilo. */
.trhk__seznam-obal {
  grid-column: 1 / -1;
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-border-svetly);
}
.trhk__seznam-nadpis {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: 0 0 var(--space-3);
}
.trhk__seznam {
  display: grid;
  /* auto-fill, ne auto-fit: jediná nabídka se jinak roztáhne přes celou
     šířku a tlačítko v ní vypadá jako pruh přes stránku. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trhk__karta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.trhk__karta--nej {
  border-color: #cfe9d6;
  background: #f8fdf9;
}
.trhk__karta-hlava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.trhk__logo {
  display: grid;
  place-items: center;
  height: 30px;
}
.trhk__logo img {
  max-width: 100px;
  max-height: 28px;
  object-fit: contain;
}
.trhk__monogram {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-surface-alt);
  font-size: var(--fs-400);
  font-weight: 500;
  color: var(--c-muted-large);
}
.trhk__stitek {
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: #0c7254;
  font-size: var(--fs-200, 12px);
  color: #fff;
  white-space: nowrap;
}
.trhk__cena {
  font-size: var(--fs-600);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.trhk__mesicne {
  font-size: var(--fs-300);
  font-weight: 400;
  color: var(--c-muted);
  letter-spacing: 0;
}
.trhk__popisek {
  display: block;
  font-size: var(--fs-400);
  margin: var(--space-2) 0 var(--space-4);
}
.trhk__rpsn {
  display: block;
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.trhk__tlacitko {
  margin-top: auto;
  text-align: center;
}
.trhk__vsechny {
  font-size: var(--fs-300);
  margin: var(--space-3) 0 0;
}

/* --- kalkulačka konsolidace ---
   Rozvržení i většinu vzhledu si bere z kalkulačky na stránce Kolik stojí
   půjčka (.trhk), aby se web nechoval na každé stránce jinak. Tady je jen
   to, co je vlastní: řádky půjček a porovnání dnes proti nově. */
.konsk__zahlavi,
.konsk__radek {
  display: grid;
  grid-template-columns: 1fr 1fr 110px;
  gap: var(--space-2) var(--space-3);
}
/* Odvozený úrok pod řádkem. Je to kontrola pro uživatele, že zadal
   správně, proto sedí hned u polí. */
.konsk__sazba {
  grid-column: 1 / -1;
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: var(--lh-tight);
}
.konsk__sazba--chyba,
.konsk__vyzva {
  font-size: var(--fs-300);
  color: var(--c-ink-700);
  border-left: 3px solid var(--c-warning);
  padding-left: var(--space-3);
  margin: 0;
}
.konsk__zahlavi {
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.konsk__vstup {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font: inherit;
}
.konsk__vstup:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}
.konsk__pridat {
  align-self: start;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-300);
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.konsk__pridat:hover {
  color: var(--c-link-dark);
}
/* Doba je dodatek za výsledkem, ne první krok. */
.konsk__jinak {
  grid-column: 1 / -1;
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border-svetly);
}

/* --- dnes proti nově --- */
/* Bez přeškrtnutí. Přeškrtnutá dnešní splátka tvrdila, že ta nová je
   lepší, přitom může být nižší jen tím, že se splácí dvakrát tak dlouho. */
/* Rozdíl je jen o měsíční platbě, ne o úspoře. Výhrada je proto rovnou
   v rámečku, ne až v textu pod kalkulačkou. */
/* Když splátka klesla jen prodloužením doby, není to dobrá zpráva a nemá
   být zelená. */
.konsk__vyhrada {
  display: block;
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin-top: 2px;
}


/* Počet nabídek u štítku. Štítek, po kterém nezbyde nic, je poznat
   dopředu, ne až po kliknutí. */
.vyb__pocet-stitku {
  margin-left: var(--space-2);
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.vyb__stitek--prazdny {
  color: var(--c-muted-large);
  border-style: dashed;
}
.vyb__stitek--prazdny:hover {
  border-color: var(--c-border);
}
}

@layer components {
/* Nápověda: ikona „i", bublina po najetí, fokusu nebo klepnutí. */
.tip { position: relative; display: inline-block; vertical-align: middle; margin-left: 4px; }

.tip__btn {
  display: grid; place-items: center;
  width: 18px; height: 18px; padding: 0;
  background: none; border: 0; border-radius: 50%;
  color: var(--c-muted);
  cursor: help;
}
.tip__btn:hover, .tip__btn:focus-visible, .tip__btn[aria-expanded="true"] { color: var(--c-ink); }
.tip__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.tip__box {
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  max-width: 260px;
  padding: var(--space-3);
  background: var(--c-ink);
  color: #fff;
  font-size: var(--fs-300);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  /* Zavřená bublina nesmí zabírat místo. Přes visibility: hidden zůstávala
     v rozvržení a počítala se do šířky stránky: u ikony blízko pravého
     okraje tím vznikl vodorovný posuvník na každé stránce, kde je
     vysvětlivka. */
  display: none;
  opacity: 0;
}
.tip__box::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--c-ink);
}
.tip:hover .tip__box,
.tip__btn:focus-visible + .tip__box,
.tip__btn[aria-expanded="true"] + .tip__box { display: block; opacity: 1; }

.tip__link { display: block; margin-top: var(--space-2); color: #fff; text-decoration: underline; }

/* Na úzkých obrazovkách se bublina roztáhne přes šířku karty.
   Dřív byla ukotvená k ikoně a u levého okraje vylézala mimo obrazovku. */
@media (max-width: 47.99rem) {
  /* .pcard má position: relative, takže se bublina kotví k celé kartě. */
  .tip { position: static; }
  .tip__box {
    left: var(--space-4);
    right: var(--space-4);
    bottom: auto;
    top: auto;
    margin-top: var(--space-2);
    transform: none;
    width: auto;
    max-width: none;
  }
  .tip__box::after { display: none; }
}

/* --- štítek „Ověřeno" ---
   Do třiceti dnů zelený, starší oranžový. Vedle něj ikona s vysvětlením,
   co přesně to znamená. */
.overeno {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  vertical-align: middle;
}
.overeno__stitek {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: #e8fbf4;
  color: var(--c-success);
  font-size: var(--fs-300);
  font-weight: 500;
  white-space: nowrap;
}
.overeno__stitek .ikona {
  width: 13px;
  height: 13px;
  color: var(--c-success);
}
.overeno--stare .overeno__stitek {
  background: #fdf3e6;
  color: var(--c-warning);
}

/* Řádek pod kalkulačkou. Říká totéž slovy a v plném datu. */
.kalk__overeno {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: var(--lh-base);
  margin: 0 0 var(--space-3);
}
.kalk__overeno .ikona {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--c-muted-large);
}
}

@layer components {
/* Výběr se šipkou, kterou kreslíme my.

   Nativní šipku kreslí každý prohlížeč jinak, nedá se zarovnat ani
   obarvit. Nová je obrázek v datové adrese, takže nepotřebuje soubor
   navíc a projde bezpečnostní hlavičkou, která u obrázků datové adresy
   povoluje. */
.uselect {
  appearance: none;
  padding: var(--space-3) calc(var(--space-6) + var(--space-3)) var(--space-3) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background-color: var(--c-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2383869C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 18px 18px;
  font: inherit;
  color: var(--c-ink);
  cursor: pointer;
}
.uselect:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}
}

@layer components {
/* --- kalkulačka na kartě --- */
.pcalc {
  grid-area: calc;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--c-surface-alt);
  border-radius: var(--radius);
}
.pcalc[hidden] { display: none; }
.pcalc__label { display: block; font-size: var(--fs-300); color: var(--c-muted); margin-bottom: var(--space-2); }
.pcalc__row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pcalc__row .uslider-wrap { flex: 1 1 180px; min-width: 0; }
.pcalc__slider { width: 100%; }
.pcalc__out { font-size: var(--fs-400); font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.pcalc__note { margin-top: var(--space-2); font-size: var(--fs-300); color: var(--c-muted); }

/* --- nástroje na detailu --- */

/* --- okno pro hlášení chyby --- */
.rdialog {
  /* Reset má * { margin: 0 }, což přebije margin: auto, kterým prohlížeč
     modální dialog vystřeďuje. Bez tohohle řádku se okno přilepí
     do levého horního rohu. */
  margin: auto;
  width: min(100% - var(--space-5) * 2, 30rem);
  max-height: min(90dvh, 44rem);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-text);
}
.rdialog::backdrop { background: rgb(0 0 0 / .45); }
.rdialog__form { padding: var(--space-5); }
.rdialog__title { font-size: var(--fs-700); }
.rdialog__lead { margin-top: var(--space-2); font-size: var(--fs-400); color: var(--c-ink-700); }
.rdialog__label { display: block; margin-top: var(--space-4); font-size: var(--fs-300); font-weight: 600; color: var(--c-ink-700); }
.rdialog__input {
  width: 100%; margin-top: var(--space-1); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  font-size: var(--fs-400); background: var(--c-surface);
}
textarea.rdialog__input { resize: vertical; }
.rdialog__status { margin-top: var(--space-3); font-size: var(--fs-400); min-height: 1.5em; }
.rdialog__status--ok  { color: #0c7254; }
.rdialog__status--err { color: var(--c-danger); }
.rdialog__actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-4); }
}

@layer components {
/* Žádost o půjčku.
   Desktop: formulář vlevo, souhrn vpravo přilepený při scrollování.
   Mobil:   souhrn nahoře jako rozbalovací pruh, tlačítko u spodní hrany. */
.lead__crumbs { padding-top: var(--space-4); }

.lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "side" "main";
  gap: var(--space-4);
  padding-block: var(--space-2) var(--space-7);
}
.lead__main { grid-area: main; min-width: 0; }
.lead__side { grid-area: side; min-width: 0; }

.lead__head { margin-bottom: var(--space-4); }
.lead__title { font-size: var(--fs-700); }

@media (min-width: 48rem) {
  .lead__title { font-size: var(--fs-800); }
}
.lead__sub { margin-top: var(--space-1); font-size: var(--fs-400); color: var(--c-muted); }

.lead__alert {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--c-danger-bg);
  border-left: 3px solid var(--c-danger);
  font-size: var(--fs-400);
  color: var(--c-ink-900);
}

/* Každá sekce je vlastní karta s očíslovaným nadpisem.
   Šedé dělicí linky nahradily rozestupy mezi kartami. */
.lead__section {
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.lead__section:last-of-type { margin-bottom: 0; }

.lead__legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-500);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.lead__step-no {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px; height: 28px;
  background: var(--c-primary-050);
  border-radius: 50%;
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--c-ink);
}

/* --- částka --- */
.lead__section--amount { background: var(--c-surface-alt); }
.lead__big {
  font-size: var(--fs-800);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.lead__big span { margin-left: 6px; font-size: var(--fs-500); font-weight: 400; color: var(--c-muted); }

.lead__presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.lead__preset {
  min-height: 38px;
  padding: 0 var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-400);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-700);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lead__preset:hover { border-color: var(--c-ink); color: var(--c-ink); }
.lead__preset--active { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 600; }
.lead__preset--active:hover { background: var(--c-ink-900); border-color: var(--c-ink-900); color: #fff; }

/* --- částka --- */
.lead__slider { margin-top: var(--space-3); }
.lead__range {
  display: flex; justify-content: space-between;
  font-size: var(--fs-300); color: var(--c-muted);
}

/* --- pole --- */
.lead__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

.lfield { margin-bottom: var(--space-3); }
.lfield:last-child { margin-bottom: 0; }
.lfield__label { display: block; font-size: var(--fs-300); font-weight: 600; color: var(--c-ink-700); margin-bottom: 4px; }
.lfield__input {
  width: 100%;
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: var(--fs-500);
  color: var(--c-text);
  background: var(--c-surface);
}
/* Zástupný text musí být jasně světlejší než vyplněná hodnota,
   jinak to vypadá, že je pole už vyplněné. */
.lfield__input::placeholder { color: #9aa1ab; opacity: 1; }
.lfield__input:focus-visible { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-primary-050); }
/* Chybné pole je vidět rámečkem i podkladem, ne jen hláškou. */
.lfield--error .lfield__input {
  border-color: var(--c-danger);
  border-width: 2px;
  background: var(--c-danger-bg);
}
.lfield--error .lfield__input:focus-visible {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px var(--c-danger-bg);
}
.lfield--error .lfield__label { color: var(--c-danger); }
.lfield__error { margin-top: 4px; font-size: var(--fs-300); color: var(--c-danger); }

/* --- vysvětlení u citlivých údajů --- */
.lead__lock {
  /* Zámek na střed výšky textu, ne k prvnímu řádku. */
  display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--c-surface-alt);
  border-left: 3px solid var(--c-ink);
  font-size: var(--fs-300);
  color: var(--c-ink-700);
  line-height: 1.5;
}
.lead__lock svg { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: var(--c-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --- souhlas --- */

.lead__consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-300); color: var(--c-ink-700); line-height: 1.5; }
.lead__consent input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--c-ink); }
.lead__error { margin-top: var(--space-2); font-size: var(--fs-300); color: var(--c-danger); }

/* --- souhrn --- */
.lsum { border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); overflow: hidden; }

.lsum__toggle {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--c-surface-alt);
  border: 0;
  font-size: var(--fs-400);
  color: var(--c-ink);
  cursor: pointer;
  text-align: left;
}
.lsum__toggle-label { flex: 1; }
.lsum__toggle-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.lsum__toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.lsum__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.lsum__body { padding: var(--space-4); }
.lsum__title { display: none; }
.lsum__list { display: grid; }
.lsum__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-400);
}
.lsum__row:last-child { border-bottom: 0; }
.lsum__row dt { color: var(--c-muted); }
.lsum__row dd { text-align: right; color: var(--c-text); font-variant-numeric: tabular-nums; }
.lsum__row--key dd { font-size: var(--fs-600); font-weight: 600; color: var(--c-ink); }

.lsum__submit { width: 100%; min-height: 48px; margin-top: var(--space-4); }
.lsum__bar-submit { display: none; }
.lsum__bar-submit .button { width: 100%; min-height: 48px; }
.lsum__note { margin-top: var(--space-3); font-size: var(--fs-300); color: var(--c-muted); line-height: 1.5; }

/* --- potvrzení --- */
.ldone { text-align: center; max-width: 34rem; }
.ldone__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto var(--space-4);
  background: #e7f4e9; border-radius: 50%;
}
.ldone__icon svg { width: 32px; height: 32px; fill: none; stroke: #0c7254; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ldone__lead { margin-top: var(--space-3); font-size: var(--fs-500); color: var(--c-ink-700); }
.ldone__id { margin-top: var(--space-4); font-size: var(--fs-400); color: var(--c-muted); }
.ldone__actions { margin-top: var(--space-5); }

@media (max-width: 61.99rem) {
  /* Souhrn drží u spodní hrany obrazovky jako druhá lišta.
     Sbalený ukazuje částku a splátku, klepnutím se rozbalí nahoru. */
  .lead__side {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
  }
  .lsum {
    border: 0;
    border-top: 1px solid var(--c-border);
    border-radius: 0;
    box-shadow: 0 -2px 16px rgb(0 0 0 / .12);
    max-height: 80vh;
    overflow-y: auto;
  }

  .lsum { background: var(--c-surface-alt); }
  .lsum__toggle {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--c-surface-alt);
  }
  .lsum__toggle-label { flex: 0 0 auto; color: var(--c-muted); font-size: var(--fs-300); }
  .lsum__toggle-value {
    flex: 1;
    text-align: right;
    font-size: var(--fs-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Lišta je dole, takže se rozbaluje nahoru: šipka míří vzhůru
     a po otevření se otočí dolů. */
  .lsum__toggle svg { transform: rotate(180deg); }
  .lsum__toggle[aria-expanded="true"] svg { transform: rotate(0deg); }

  .lsum__body { display: none; padding-top: 0; }
  .lsum--open .lsum__body { display: block; }

  /* Tlačítko je v liště, takže je vidět pořád. */
  .lsum__submit { margin-top: var(--space-3); }
  .lsum__note { margin-top: var(--space-2); }

  /* Odeslat musí jít i se sbaleným souhrnem. */
  .lsum__bar-submit {
    display: block;
    padding: 0 var(--space-4) var(--space-3);
    background: var(--c-surface-alt);
  }
  .lsum--open .lsum__bar-submit { display: none; }

  /* Aby lišta nezakrývala konec formuláře. */
  .lead { padding-bottom: calc(var(--space-7) + 116px); }
}

@media (min-width: 48rem) {
  .lead__row { grid-template-columns: 1fr 1fr; }
  .lead__row--city { grid-template-columns: 2fr 1fr; }
}

@media (min-width: 62rem) {
  .lead {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "main side";
    gap: var(--space-6);
  }
  .lsum__toggle { display: none; }
  .lsum__body { display: block; }
  .lsum__title { display: block; font-size: var(--fs-600); font-weight: 600; margin-bottom: var(--space-3); }
  /* Bez align-self je položka protažená na výšku celého řádku
     a přilepení nemá kam jet. */
  .lead__side { position: sticky; top: calc(64px + var(--space-4)); align-self: start; }
}

.lead__lock strong { color: var(--c-ink); }
}

@layer components {
/* Stránka poskytovatele. Stavbu nese nabídka, firemní údaje jsou přídavek. */

/* Kontejner webu je 1160 px. Obsah téhle stránky se v něm roztahoval a mezi
   prvky vznikaly prázdné plochy, proto má vlastní užší strop. */
.pstranka {
  max-width: 940px;
  margin-inline: auto;

  /* Jedna mezera mezi bloky pro celou stránku. Dřív měl každý blok svou
     (1,5 rem, 2 rem, 3 rem, 4 rem) a odstupy vycházely pokaždé jinak. */
  --mezera: var(--space-7);
}

/* Drobečková navigace je nad hlavičkou, drží stejný odstup jako zbytek. */
.pstranka > .breadcrumbs {
  margin-bottom: var(--mezera);
}

/* --- ikony --- */
.ikona {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--c-muted-large);
}

/* --- hlavička --- */
.phead {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.phead__logo {
  flex: 0 0 auto;
  width: 148px;
  height: 80px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.phead__logo img {
  max-width: 124px;
  max-height: 60px;
  object-fit: contain;
}
/* Logo má šestnáct poskytovatelů ze čtyřiceti čtyř, zbytek dostane písmeno. */
.phead__monogram {
  font-size: var(--fs-800);
  font-weight: 500;
  color: var(--c-ink);
}
.phead__text {
  flex: 1 1 auto;
  min-width: 0;
}
.phead__name {
  font-size: var(--fs-800);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0;
}
.phead__stitky {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}
.phead__stitek {
  font-size: var(--fs-300);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--c-surface-alt);
  color: var(--c-ink-700);
}
.phead__stitek--typ {
  background: var(--c-primary-050);
  color: var(--c-ink);
}
.phead__akce {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.phead__index {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 15ch;
  justify-content: flex-end;
  margin: 0;
}
.phead__hvezdy {
  font-size: var(--fs-600);
  color: var(--c-warning);
  letter-spacing: 0.06em;
  line-height: 1;
}
.phead__indexpopis {
  flex-basis: 100%;
  text-align: right;
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: 1.3;
}

/* Odkaz na web poskytovatele. Zelená patří jen tlačítku Mám zájem, tohle
   je odchozí odkaz, ne akce, kterou po návštěvníkovi chceme. */
.pweb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  background: var(--c-ink);
  color: var(--c-on-ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
/* Ztmavení do černé sem nesedí. Hover jde do modré, kterou má web
   na aktivních prvcích, a tlačítko lehce vystoupí jako ostatní karty. */
.pweb:hover {
  background: var(--c-primary-dark);
  color: var(--c-on-ink);
  box-shadow: var(--shadow-1);
}
.pweb__sipka {
  font-size: var(--fs-300);
}

.pstranka > .perex {
  margin: 0 0 var(--mezera);
}

/* --- pás čísel spočítaný z nabídky ---
   Čtyři dlaždice v řadě, na mobilu dvě na dvě. Hodnota stojí nad popiskem,
   protože kvůli číslu tady ten blok je. */
.psouhrn {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--mezera);
  padding: 0;
}
.psouhrn__pole {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--c-surface);
}
.psouhrn__pole {
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pweb {
  transition: background-color .15s ease, box-shadow .15s ease;
}
.psouhrn__pole:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.psouhrn__ikona {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  margin-bottom: var(--space-3);
}
.psouhrn__ikona .ikona {
  color: var(--c-muted-large);
}
.psouhrn__ikona--castka,
.psouhrn__ikona--cas {
  background: var(--c-primary-050);
}
.psouhrn__ikona--castka .ikona,
.psouhrn__ikona--cas .ikona {
  color: var(--c-primary-dark);
}
/* Světlá zelená v tokenech není, odvozená je z --c-cta. Používá se jen tady
   jako podklad ikony, nikdy pod text. */
.psouhrn__ikona--urok {
  background: #e8fbf4;
}
.psouhrn__ikona--urok .ikona {
  color: var(--c-cta-dark);
}
.psouhrn dd {
  font-size: var(--fs-600);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.psouhrn dt {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin-top: var(--space-1);
}
/* Chybějící údaj je drobný text, ne velké číslo. */
.psouhrn__chybi {
  font-size: var(--fs-400);
  font-weight: 400;
  color: var(--c-muted);
}

/* --- nadpis sekce s počtem --- */
.pnadpis {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  /* Uvnitř sekce je mezera menší, ať nadpis patří k tomu, co je pod ním. */
  margin-bottom: var(--space-4);
}
/* Výpis si nese vlastní horní okraj. Tady už mezeru drží nadpis nad ním,
   jinak by se odstupy sčítaly. */
.pstranka .listing {
  margin-top: 0;
}
.pnadpis__text {
  font-size: var(--fs-700);
  letter-spacing: -0.01em;
  margin: 0;
}
/* Sekce pod nabídkou potřebuje vlastní odstup, karta produktu jinak
   končí těsně pod nadpisem další sekce. */
.pnadpis--odsazeny {
  margin-top: var(--mezera);
}
.pnadpis__pocet {
  font-size: var(--fs-300);
  color: var(--c-muted);
}

/* --- text a kontakt vedle sebe --- */
.pspodek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--mezera);
}
.pspodek__text {
  min-width: 0;
}
.pkontakt {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.pkontakt__nadpis {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: 0 0 var(--space-3);
}
.pkontakt__radek {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-400);
  color: var(--c-text);
  text-decoration: none;
  margin: 0;
}
.pkontakt__radek:first-of-type {
  border-top: 0;
  padding-top: 0;
}
a.pkontakt__radek:hover {
  color: var(--c-link-dark);
}
.pkontakt__radek--adresa {
  align-items: flex-start;
  color: var(--c-ink-700);
  white-space: pre-line;
  line-height: var(--lh-base);
  padding-bottom: 0;
}

/* --- poznámka k indexu --- */
.ppozn {
  font-size: var(--fs-400);
  color: var(--c-muted);
  line-height: var(--lh-base);
  padding-left: var(--space-4);
  border-left: 2px solid var(--c-border);
  margin: 0 0 var(--mezera);
}

/* --- podobní poskytovatelé --- */
.ppodobni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ppodobni__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* Karta není odkaz, protože uvnitř je tlačítko vysvětlivky a to se do
   odkazu vložit nesmí. Odkazem je jméno a karta reaguje i na fokus. */
.ppodobni__item:hover,
.ppodobni__item:focus-within {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.ppodobni__nazev {
  font-size: var(--fs-400);
  font-weight: 500;
  color: var(--c-ink);
  line-height: var(--lh-tight);
  text-decoration: none;
}
.ppodobni__nazev:hover {
  color: var(--c-link-dark);
}
.ppodobni__index {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-border);
  margin: auto 0 0;
}
/* Hvězdičky jsou tu stejnou třídou jako na kartě produktu, ať se to
   po webu neliší. Jen odsazení zleva tady nechceme. */
.ppodobni__index .pcard__stars {
  margin-left: 0;
}
.ppodobni__bezindexu {
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.ppodobni__udaje {
  font-size: var(--fs-300);
  color: var(--c-muted);
}

/* --- mobil --- */
@media (max-width: 47.99em) {
  .pstranka {
    --mezera: var(--space-6);
  }

  /* Hlavička se přeskládá: nahoře logo a vpravo od něj odkaz na web,
     pod nimi název a štítky přes celou šířku. */
  .phead {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
  }
  .phead__logo {
    order: 1;
    width: 116px;
    height: 62px;
  }
  .phead__logo img {
    max-width: 96px;
    max-height: 46px;
  }
  .phead__akce {
    order: 2;
    margin-left: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
  }
  .phead__text {
    order: 3;
    flex-basis: 100%;
  }
  .phead__name {
    font-size: var(--fs-700);
  }
  .phead__index {
    max-width: none;
  }
  .pweb {
    padding: var(--space-3) var(--space-4);
  }

  /* Čtyři dlaždice vedle sebe se nevejdou, jdou dvě na dvě. */
  .psouhrn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .psouhrn dd {
    font-size: var(--fs-500);
  }

  .pspodek {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Na úzkém telefonu se logo a tlačítko vedle sebe nevejdou. */
@media (max-width: 22.5em) {
  .phead__akce {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    align-items: stretch;
  }
  .phead__text {
    order: 2;
  }
  .pweb {
    justify-content: center;
  }
}

/* --- seznam poskytovatelů ---
   Tabulka, ne dlaždice. Mřížka místo <table>, aby šly sloupce na mobilu
   přeskládat. Role nese HTML kvůli čtečkám. */
.pseznam__hlava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.pseznam__nadpis {
  font-size: var(--fs-800);
  letter-spacing: -0.02em;
  margin: 0;
}
.pseznam__pocet {
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.pseznam__perex {
  max-width: 70ch;
  margin: var(--space-3) 0 var(--space-6);
}

/* Stejná šířka jako ostatní obsahové stránky. Přes celých 1160 px
   zůstávala uprostřed řádku prázdná plocha. */
.pseznam,
.pseznam__hlava,
.pseznam__perex {
  max-width: 940px;
  margin-inline: auto;
}
/* Bez overflow: hidden. Vysvětlivka u prvního řádku vyčnívá nad tabulku
   a ořezávala se. Rohy proto zaobluje záhlaví a poslední řádek zvlášť. */
.pseznam {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.pseznam__zahlavi,
.pseznam__radek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 110px 170px;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-5);
}
.pseznam__zahlavi {
  background: var(--c-surface-alt);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.pseznam__radek {
  border-bottom: 1px solid var(--c-border-svetly);
  padding-block: var(--space-3);
  transition: background-color .12s ease;
}
.pseznam__radek:last-child {
  border-bottom: 0;
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
}
.pseznam__radek:hover {
  background: var(--c-surface-alt);
}

/* --- firma ---
   Logo bez rámečku. Krabička kolem každého z nich dělala ze seznamu
   řadu razítek. */
.pseznam__firma {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.pseznam__logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 128px;
  height: 52px;
  border-radius: var(--radius);
  transition: transform .12s ease, opacity .12s ease;
}
.pseznam__logo:hover {
  transform: translateY(-1px);
  opacity: .85;
}
/* Najetí kamkoliv na řádek podtrhne název, ať je jasné, že celý řádek
   vede na jedno místo. */
.pseznam__radek:hover .pseznam__nazev {
  color: var(--c-link-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pseznam__logo img {
  max-width: 128px;
  max-height: 48px;
  object-fit: contain;
}
.pseznam__monogram {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-surface-alt);
  font-size: var(--fs-600);
  font-weight: 500;
  color: var(--c-muted-large);
}
.pseznam__nazev {
  font-size: var(--fs-400);
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  line-height: var(--lh-tight);
}
.pseznam__nazev:hover {
  color: var(--c-link-dark);
}

/* --- ostatní sloupce --- */
.pseznam__index {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* U prvního řádku by se vysvětlivka otevřela nahoru pod přilepenou
   hlavičku webu. Tam se proto otevírá dolů. */
.pseznam__radek:first-of-type .tip__box {
  top: calc(100% + 8px);
  bottom: auto;
}
.pseznam__radek:first-of-type .tip__box::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--c-ink);
}
/* Poskytovatel bez indexu to má napsané. Prázdné místo vedle čtyř hvězd
   vypadalo jako nula bodů. */
.pseznam__bezindexu {
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.pseznam__pocty,
.pseznam__rozsah {
  font-size: var(--fs-400);
  color: var(--c-ink-700);
}
.pseznam__rozsah {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.pseznam__stitek {
  padding: 1px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--c-surface-alt);
  font-size: var(--fs-300);
  color: var(--c-ink-700);
}
@media (max-width: 61.99em) {
  /* Nejdřív padá sloupec s rozsahem, pak hlavička. */
  .pseznam__zahlavi,
  .pseznam__radek {
    grid-template-columns: minmax(0, 1fr) 140px 110px;
  }
  .pseznam__zahlavi span:nth-child(4),
  .pseznam__rozsah {
    display: none;
  }
}

@media (max-width: 47.99em) {
  .pseznam__zahlavi {
    display: none;
  }
  /* Bez záhlaví se řadí výběrem. */
  .pfiltr {
    justify-content: flex-start;
  }
  .pfiltr__popis--mobil,
  .pfiltr__vyber--mobil {
    display: inline-block;
  }
  .pseznam__radek {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4);
  }
  .pseznam__firma {
    grid-column: 1 / -1;
  }
  .pseznam__index {
    grid-column: 1;
  }
  .pseznam__pocty {
    grid-column: 2;
    text-align: right;
    font-size: var(--fs-300);
    color: var(--c-muted);
  }
  .pseznam__logo {
    width: 104px;
    height: 44px;
  }
  .pseznam__logo img {
    max-width: 104px;
    max-height: 40px;
  }
  .pseznam__nadpis {
    font-size: var(--fs-700);
  }
}

/* --- filtr a řazení ---
   Filtr je výběr vpravo nad tabulkou, řazení se ovládá klikem na záhlaví
   sloupce. Na mobilu záhlaví mizí, proto je tam řazení taky jako výběr. */
.pfiltr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  max-width: 940px;
  margin: 0 auto var(--space-4);
}
.pfiltr__popis {
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.pfiltr__vyber {
  font-size: var(--fs-300);
  padding-block: var(--space-2);
}
.pfiltr__potvrdit {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-300);
}
/* Na desktopu řadí záhlaví, výběr by byl druhé ovládání téhož. */
.pfiltr__popis--mobil,
.pfiltr__vyber--mobil {
  display: none;
}

/* --- řazení v záhlaví --- */
.pseznam__radit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-muted);
  text-decoration: none;
}
.pseznam__radit:hover {
  color: var(--c-ink);
}
.pseznam__radit--aktivni {
  color: var(--c-ink);
  font-weight: 500;
}
.pseznam__smer {
  font-size: 11px;
  line-height: 1;
}
/* Neaktivní šipka je vidět až po najetí, jinak by záhlaví vypadalo
   jako tři stejně důležité stavy. */
.pseznam__smer--tichy {
  opacity: 0;
  transition: opacity .12s ease;
}
.pseznam__radit:hover .pseznam__smer--tichy {
  opacity: .5;
}

/* Název s obory, které poskytovatel nabízí. */
.pseznam__jmeno {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pseznam__obory {
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: var(--lh-tight);
}
.pseznam__odkaz {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--c-border);
}
.pseznam__odkaz:hover {
  text-decoration-color: currentColor;
}

/* --- žebříček podle indexu ---
   Seskupeno podle hvězdiček, protože tak je dělí sám index. Barva proužku
   se drží skupiny, ne jednotlivého čísla, aby čtyřhvězdičkový
   a jednohvězdičkový poskytovatel nevypadali stejně. */
.zebr {
  max-width: 820px;
  margin-inline: auto;
}
.zebr__nadpis {
  font-size: var(--fs-800);
  letter-spacing: -0.02em;
  margin: var(--space-5) 0 var(--space-4);
}
.zebr__perex {
  margin-bottom: var(--space-6);
}

.zebr__skupina {
  margin-bottom: var(--space-6);
}
.zebr__nadpis-skupiny {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-500);
  font-weight: 500;
  margin: 0 0 var(--space-3);
}
.zebr__nadpis-skupiny .pcard__stars {
  font-size: var(--fs-400);
}
/* Kovy místo zelené škály: zlatá, stříbrná, bronzová a černá pro
   zbytek. Text má tmavší odstín než proužek, jinak by se nedal číst. */
.zebr__nadpis-skupiny--4 { color: #8a6a08; }
.zebr__nadpis-skupiny--3 { color: #5f6470; }
.zebr__nadpis-skupiny--2 { color: #8a5a28; }
.zebr__nadpis-skupiny--1 { color: var(--c-ink); }
.zebr__pocet-skupiny {
  font-size: var(--fs-300);
  font-weight: 400;
  color: var(--c-muted);
}

.zebr__seznam {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.zebr__polozka {
  display: grid;
  grid-template-columns: 36px 120px minmax(0, 1fr) 140px;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--c-border-svetly);
}
.zebr__polozka:last-child {
  border-bottom: 0;
}
/* Podbarvení po najetí je hranaté a u krajních položek vylézalo z kulatého
   rohu seznamu. Rohy proto zaobluje i sama položka. Řešit to přes
   overflow: hidden nejde, ořízlo by to vysvětlivku. */
.zebr__polozka:first-child {
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.zebr__polozka:last-child {
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
}
.zebr__polozka:only-child {
  border-radius: calc(var(--radius-lg) - 1px);
}
.zebr__polozka:hover {
  background: var(--c-surface-alt);
}
.zebr__poradi {
  font-size: var(--fs-500);
  font-weight: 500;
  color: var(--c-muted-large);
  text-align: center;
}
.zebr__logo {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: var(--radius);
  transition: transform .12s ease, opacity .12s ease;
}
.zebr__logo:hover {
  transform: translateY(-1px);
  opacity: .85;
}
.zebr__logo img {
  max-width: 116px;
  max-height: 40px;
  object-fit: contain;
}
.zebr__monogram {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-surface-alt);
  font-size: var(--fs-500);
  font-weight: 500;
  color: var(--c-muted-large);
}
.zebr__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.zebr__nazev {
  font-size: var(--fs-500);
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  line-height: var(--lh-tight);
}
.zebr__polozka:hover .zebr__nazev {
  color: var(--c-link-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.zebr__radek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-300);
  color: var(--c-muted);
}
.zebr__nabidky {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--c-border);
}
.zebr__bez {
  color: var(--c-muted-large);
}
.zebr__skore {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: right;
}
.zebr__cislo {
  font-size: var(--fs-600);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.zebr__ze {
  font-size: var(--fs-300);
  font-weight: 400;
  color: var(--c-muted);
}
.zebr__prouzek {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--c-surface-alt);
  overflow: hidden;
}
.zebr__vypln {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--c-muted-large);
}
.zebr__vypln--4 { background: #d4a017; }
.zebr__vypln--3 { background: #9aa0ab; }
.zebr__vypln--2 { background: #b07a3c; }
.zebr__vypln--1 { background: #2b2d3a; }
.zebr__pozn {
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: var(--lh-base);
  margin-top: var(--space-4);
}

@media (max-width: 47.99em) {
  /* Na mobilu dva řádky místo čtyř sloupců pod sebou: nahoře pořadí,
     logo a skóre, dole název s odkazy, pod tím proužek. */
  .zebr__polozka {
    grid-template-columns: 22px 1fr auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
  }
  .zebr__poradi {
    font-size: var(--fs-400);
    text-align: left;
  }
  .zebr__logo {
    height: 30px;
    justify-self: start;
  }
  .zebr__logo img {
    max-width: 96px;
    max-height: 28px;
  }
  .zebr__skore {
    grid-row: 1;
    grid-column: 3;
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-2);
  }
  .zebr__prouzek {
    grid-row: 3;
    grid-column: 1 / -1;
    width: 100%;
  }
  .zebr__text {
    grid-column: 1 / -1;
  }
  .zebr__nadpis {
    font-size: var(--fs-700);
  }
}

.pseznam__odkazzebr {
  margin-top: calc(var(--space-4) * -1);
  margin-bottom: var(--space-4);
  font-size: var(--fs-400);
}
.zebr__zdroj {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: calc(var(--space-4) * -1) 0 var(--space-6);
}
}

@layer components {
/* Detail produktu. Stejný jazyk jako stránka poskytovatele:
   jedna svislá mezera, dlaždice, vlásečnice místo rámečků. */

.pdet__obsah {
  max-width: 940px;
  margin-inline: auto;
  --mezera: var(--space-7);
  /* Spodní lišta překrývá konec stránky, proto místo pod obsahem. */
  padding-bottom: var(--space-8);
}

/* --- hlavička --- */
.pdet__head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--mezera);
}
.pdet__logo {
  flex: 0 0 auto;
  width: 148px;
  height: 80px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pdet__logo img {
  max-width: 124px;
  max-height: 60px;
  object-fit: contain;
}
.pdet__text {
  min-width: 0;
}
.pdet__title {
  font-size: var(--fs-800);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0;
}
.pdet__meta {
  font-size: var(--fs-400);
  color: var(--c-muted);
  margin: var(--space-3) 0 0;
}

/* --- kalkulačka --- */
.kalk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-5);
  /* Oba panely mají stejnou výšku. Aby v levém nezbývalo prázdno, je jeho
     obsah svisle na střed a číslo vpravo je menší, než bylo. */
  align-items: stretch;
  margin-bottom: var(--mezera);
  scroll-margin-top: var(--space-6);
}
.kalk__vstupy {
  background: var(--c-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Vstupy jsou stejná komponenta jako kalkulačka na titulní straně
   (.calc), aby se web nechoval na každé stránce jinak. */
.kalk__druhy {
  margin-top: var(--space-5);
}
.calc__field--jen-text {
  cursor: default;
}
.calc__input--vystup {
  width: auto;
  min-width: 5rem;
  display: block;
}

.kalk__vysledek {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}
.kalk__label {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: 0 0 var(--space-2);
}
.kalk__splatka {
  font-size: var(--fs-800);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-5);
}
.kalk__souhrn {
  margin: 0 0 var(--space-5);
}
.kalk__souhrn > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-border);
}
.kalk__souhrn dt {
  font-size: var(--fs-400);
  color: var(--c-muted);
}
.kalk__souhrn dd {
  font-size: var(--fs-400);
  font-weight: 500;
  margin: 0;
}
.kalk__cta {
  margin-top: auto;
  text-align: center;
}

/* --- čísla bez kalkulačky --- */
.pdet__fakta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--mezera);
}
.pdet__fakt {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.pdet__fakt-label {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: 0 0 var(--space-2);
}
.pdet__fakt-hodnota {
  font-size: var(--fs-600);
  font-weight: 500;
  margin: 0;
}
.pdet__fakt-hodnota--chybi {
  font-size: var(--fs-400);
  font-weight: 400;
  color: var(--c-muted);
}

/* --- texty --- */
.pdet__perex {
  margin: 0 0 var(--mezera);
}
.pdet__callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--mezera);
}
.pdet__prose {
  margin-bottom: var(--mezera);
}

/* --- skupiny parametrů --- */
.pdet__skupina {
  margin-bottom: var(--mezera);
}
.pdet__skupina-nadpis {
  font-size: var(--fs-700);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
/* Dlouhá odpověď se do dvousloupcové mřížky nevejde a zarovnaná doprava
   se nedá číst, proto má vlastní kartu přes celou šířku. */
.pdet__dlouhy {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-3);
}
.pdet__dlouhy-label {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: 0 0 var(--space-2);
}
.pdet__dlouhy-text {
  font-size: var(--fs-400);
  line-height: var(--lh-base);
  margin: 0;
}

.pdet__priklad {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.pdet__priklad summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.pdet__priklad summary::-webkit-details-marker {
  display: none;
}
.pdet__priklad summary::after {
  content: "+";
  font-size: var(--fs-600);
  font-weight: 400;
  color: var(--c-muted);
  line-height: 1;
}
.pdet__priklad[open] summary::after {
  content: "−";
}
.pdet__priklad[open] summary {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-border-svetly);
}

/* --- plovoucí lišta akcí ---
   Pilulka u spodní hrany okna. Neleží přes celou šířku, aby nezakrývala
   obsah a nesplývala s patičkou. */
.pdetlista {
  position: fixed;
  inset: auto 0 var(--space-5) 0;
  z-index: 25;
  display: flex;
  justify-content: center;
  padding-inline: var(--space-4);
  padding-bottom: env(safe-area-inset-bottom, 0);
  pointer-events: none;
}
.pdetlista__vnitrek {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.14);
  max-width: 100%;
}
.pdetlista__akce {
  margin: 0;
  display: flex;
}
.pdetlista__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--c-ink-700);
  cursor: pointer;
  transition: background-color .15s ease;
}
.pdetlista__btn:hover {
  background: var(--c-surface-alt);
}
.pdetlista__btn .ikona {
  width: 19px;
  height: 19px;
  color: var(--c-muted-large);
}
.pdetlista__btn[aria-pressed="true"] .ikona {
  color: var(--c-cta-dark);
}
.pdetlista__deleni {
  width: 1px;
  height: 24px;
  background: var(--c-border);
  margin-inline: var(--space-2);
}
/* Tvar pilulky, ale barvy i chování si bere z .button--cta, ať se
   nechová jinak než tlačítko v kalkulačce nahoře. */
.pdetlista__cta {
  flex: 0 1 auto;
  min-width: 0;
  border-radius: var(--radius-pill);
  padding-inline: var(--space-5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdetlista__castka {
  font-weight: 400;
  opacity: .85;
}

/* Lišta srovnání se posadí nad pilulku, jinak by se překrývaly. */
body:has(.pdetlista) .compare-tray {
  bottom: calc(56px + var(--space-6));
}

@media (max-width: 47.99em) {
  .pdet__obsah {
    --mezera: var(--space-6);
  }
  .pdet__head {
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .pdet__title {
    font-size: var(--fs-700);
  }
  .kalk {
    grid-template-columns: minmax(0, 1fr);
  }
  .kalk__splatka {
    font-size: var(--fs-800);
  }
  /* Na mobilu pilulka zabere celou šířku, tlačítko dostane zbytek místa. */
  .pdetlista {
    inset: auto 0 var(--space-3) 0;
    padding-inline: var(--space-3);
  }
  .pdetlista__vnitrek {
    width: 100%;
    padding-left: var(--space-3);
  }
  .pdetlista__cta {
    flex: 1 1 auto;
    text-align: center;
    padding-inline: var(--space-4);
  }
  .pdetlista__deleni {
    margin-inline: var(--space-1);
  }
}

/* --- Jak si půjčka stojí ---
   Osa od nejnižší po nejvyšší sazbu v kategorii s bodem, kde leží tenhle
   produkt. Kreslí se jen tehdy, když je co porovnávat. */
.pstoji {
  margin-bottom: var(--mezera);
}
.pstoji__popis {
  font-size: var(--fs-400);
  color: var(--c-muted);
  margin: calc(var(--space-4) * -1) 0 var(--space-4);
}
.pstoji__mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}
.pstoji__karta {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.pstoji__hlava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.pstoji__nazev {
  font-size: var(--fs-400);
  color: var(--c-muted);
}
.pstoji__moje {
  font-size: var(--fs-600);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pstoji__moje--chybi {
  font-size: var(--fs-400);
  font-weight: 400;
  color: var(--c-muted);
}
/* Polohu bodu na ose člověk odhadovat nemusí, proto je to i slovy. */
.pstoji__slovy {
  display: block;
  font-size: var(--fs-300);
  font-weight: 400;
  color: var(--c-muted);
  margin-top: var(--space-1);
}
.pstoji__slovy--lepsi {
  color: var(--c-success);
}
.pstoji__osa {
  position: relative;
  height: 5px;
  margin-top: var(--space-5);
  border-radius: 3px;
  background: linear-gradient(to right, var(--c-surface-alt), var(--c-border));
  margin: 0 0 var(--space-3);
}
/* Ostatní půjčky v kategorii. Bez nich není poznat, jestli je nabídka
   rozprostřená, nebo nahloučená. */
.pstoji__znacka {
  position: absolute;
  top: -1px;
  width: 7px;
  height: 7px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--c-border);
}
/* Prostřední hodnota. Jediná čára na ose, která nese význam. */
.pstoji__stred {
  position: absolute;
  top: -8px;
  width: 2px;
  height: 21px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--c-muted-large);
}
.pstoji__bod {
  position: absolute;
  top: -4px;
  width: 13px;
  height: 13px;
  margin-left: -6px;
  border-radius: 50%;
  background: #d9822b;
  border: 2px solid var(--c-surface);
}
/* Pod prostřední hodnotou je sazba levnější než polovina kategorie. */
.pstoji__bod--lepsi {
  background: var(--c-cta-dark);
}
.pstoji__meze {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: 0 0 var(--space-2);
}
.pstoji__stredpopis {
  text-align: center;
}
.pstoji__bez {
  font-size: var(--fs-300);
  color: var(--c-muted);
  line-height: var(--lh-base);
  margin: 0;
}
.pstoji__pozn {
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: var(--space-3) 0 0;
}


/* --- produkt, který se už neposkytuje ---
   Nepřehlédnutelný pruh nahoře. Údaje pod ním zůstávají kvůli lidem,
   kteří ten produkt mají sjednaný, ale nenabízí se konverze. */
.pdet__zruseno {
  border: 1px solid #f0c9a8;
  border-left: 4px solid var(--c-warning);
  border-radius: var(--radius-lg);
  background: #fdf7f0;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--mezera);
}
.pdet__zruseno-nadpis {
  font-size: var(--fs-500);
  font-weight: 500;
  margin: 0 0 var(--space-2);
}
.pdet__zruseno-text {
  font-size: var(--fs-400);
  color: var(--c-ink-700);
  line-height: var(--lh-base);
  margin: 0 0 var(--space-4);
}
.pdetlista__zruseno {
  margin-left: auto;
  padding-inline: var(--space-4);
  font-size: var(--fs-300);
  color: var(--c-muted);
  white-space: nowrap;
}

/* --- vývoj sazby ---
   Graf se kreslí na serveru jako SVG, aby byl vidět i bez JavaScriptu
   a prošel bezpečnostní hlavičkou. */
.pdet__historie {
  margin-bottom: var(--mezera);
}
.grafs {
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.grafs__popis {
  font-size: var(--fs-400);
  color: var(--c-ink-700);
  line-height: var(--lh-base);
  margin-bottom: var(--space-4);
}
.grafs__obraz {
  display: block;
  width: 100%;
  height: auto;
}
.grafs__cara {
  stroke: var(--c-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.grafs__bod {
  fill: var(--c-primary);
}
.grafs__bod--posledni {
  fill: var(--c-ink);
}
.grafs__stitek {
  font-size: 11px;
  fill: var(--c-muted);
}
.grafs__meze {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-300);
  color: var(--c-muted);
  margin: var(--space-3) 0 0;
}
}

@layer components {
}

@layer components {
.article-detail__figure { margin: 0 0 var(--space-5); }
/* Popisek pod fotkou: svislý proužek drží popis a původ pohromadě,
   aby nevypadaly jako pokračování textu článku. */
.article-detail__kredit {
  margin-top: var(--space-3);
  padding-left: var(--space-3);
  border-left: 3px solid var(--c-border);
}
.article-detail__kredit-popis { display: block; font-size: var(--fs-400); color: var(--c-text); }
.article-detail__kredit-zdroj { display: block; margin-top: 2px; font-size: var(--fs-300); color: var(--c-text-muted); }
}

@layer components {
/* Perex stojí pod H1 a je vidět, že je to úvod, ne první odstavec textu. */
.article-detail__perex {
  margin: var(--space-3) 0 var(--space-4);
  font-size: var(--fs-500);
  line-height: 1.6;
  color: var(--c-text-2, var(--c-text));
}
}

@layer utilities {
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
}