/* Asoftis.cz — čisté CSS, žádné frameworky.
   Paleta 2026: jedna akcentová barva (modrá) nese všechny hlavní akce.
   Zelená a čistě červená z tlačítek zmizely — signální barvy zůstávají
   jen tam, kde něco opravdu signalizují (ceny, chybové hlášky).

   Výtvarný princip: vede LINKA, ne stín. Plochy drží pohromadě obrysy
   a odsazení, stíny jsou jen tam, kde se něco opravdu vrství (menu, snímky).
   Nic se při najetí myší nenadzvedává — mění se barva a obrys, ne pozice. */

:root {
    --dark:        #24272B;
    --dark-2:      #31353B;
    --dark-3:      #1A1C20;

    /* Primární akce. #125BAE s bílým textem má kontrast 6.70:1 (WCAG AA).
       Modrá drží vysoký kontrast a zůstane modrá — oranžová se při ztmavení
       na potřebných 4.5:1 mění v hnědou, proto z palety odešla. */
    --accent:      #125BAE;
    --accent-hover:#0E4788;
    /* Světlá modrá jen na tmavém pozadí, nikdy pod bílý text. */
    --accent-glow: #5FAEFF;
    /* Aktivní položka menu. Jasnější než --accent, aby se plocha odlepila
       od tmavé hlavičky (3.26:1), a přitom unesla bílý text (4.61:1). */
    --nav-active:  #1C74DA;
    --nav-active-line: #B8DEFF;
    --accent-soft: #EFF5FC;
    --accent-line: #C7DCF2;

    --danger:      #C62828;
    /* Nákup na světlém podkladu. Jasnější než cenová --danger, aby plocha
       tlačítka vystoupila jako akce, ne jako text. 4.98:1 s bílou (AA). */
    --buy:         #D32F2F;
    --buy-hover:   #B71C1C;
    --highlight:   #FFC000;

    --text:        #23262A;
    --text-muted:  #5B6067;
    /* Tlumený text na tmavém pozadí — 9.7:1 na #24272B. */
    --text-onDark: #C6CAD0;

    --border:      #E3E6EA;
    --border-strong: #CBD0D6;
    --surface:     #F6F8FA;
    --footer-bg:   #F6F8FA;
    --white:       #ffffff;

    /* Menší rádiusy — 14px působilo měkce až hravě. */
    --radius:      6px;
    --radius-lg:   10px;

    /* Stíny jen pro vrstvení. Karty je nemají, drží je obrys. */
    --shadow:      0 2px 8px rgba(16, 24, 40, 0.08);
    --shadow-lg:   0 8px 28px rgba(16, 24, 40, 0.12);

    --wrap:        1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    /* 18px základ — web cílí i na starší uživatele, 16px bylo na hraně. */
    font-size: 1.125rem;
    color: var(--text);
    line-height: 1.7;
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-hover); }

/* Odkazy uvnitř textu podtržené — samotná barva je pro slabší zrak málo. */
main p a, main li a, .site-footer__bottom a { text-decoration: underline; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Na tmavém pozadí musí být obrys světlý, jinak splyne. */
.hero :focus-visible,
.site-header :focus-visible,
.product-cta :focus-visible { outline-color: var(--accent-glow); }

h1, h2, h3 { color: var(--dark); line-height: 1.2; margin: 0 0 0.6em; }
/* Záporný tracking na velkých stupních — bez něj působí nadpisy rozsypaně. */
h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

/* Jemné najetí sekcí při scrollu — bez JS (viz main.js) zůstává obsah plně vidět. */
.js-reveal .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Buttons --------------------------------------------------------- */

/* Tři úrovně, jedna barevná. Primární = akcent (stáhnout, koupit v závěru),
   sekundární = tmavá (druhá akce vedle primární), outline = navigace. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* min-height 52px — pohodlný cíl i pro méně jistou ruku. */
    min-height: 52px;
    padding: 14px 26px;
    border-radius: var(--radius);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    /* Žádný translateY — nadskakující tlačítka působí hravě, ne spolehlivě. */
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    border: 1px solid transparent;
}

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}
.btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--white);
}

/* Nákup na světlém podkladu — jediné místo, kde barva smí přebít primární
   modrou. V tmavém závěrečném pruhu se nepoužívá, tam nese nákup .btn--primary. */
.btn--buy {
    background: var(--buy);
    border-color: var(--buy);
    color: var(--white);
}
.btn--buy:hover {
    background: var(--buy-hover);
    border-color: var(--buy-hover);
    color: var(--white);
}

.btn--outline {
    background: var(--white);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn--outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* Na tmavém podkladu (.product-cta) — tam by sekundární tmavá zanikla. */
.btn--ghost {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.45);
}
.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--white);
    color: var(--white);
}

.badge-soon {
    display: inline-block;
    background: var(--highlight);
    color: var(--dark);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 10px;
    border-radius: 999px;
}
.badge-soon--lg { font-size: 1rem; padding: 8px 18px; }
.product-hero__soon-note { max-width: 46ch; color: var(--text-muted); }

/* --- Header ------------------------------------------------------------ */

.site-header { position: sticky; top: 0; z-index: 50; }

.site-header__bar { background: var(--dark); }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 20px;
}

.site-logo { flex-shrink: 0; line-height: 0; }

.main-nav { margin-left: auto; }
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Jen hlavní úroveň je vodorovná — .sub-nav si řídí zobrazení sama.
   Pozor: selektor musí zůstat s přímým potomkem, jinak přebije .sub-nav. */
.main-nav > ul {
    display: flex;
    gap: 2px;
}
.main-nav > ul > li { position: relative; }
.main-nav a {
    display: block;
    padding: 10px 16px;
    color: var(--white);
    font-size: 1.1rem;
    border-radius: var(--radius);
    transition: background .2s ease, color .2s ease;
}
.main-nav a:hover { background: rgba(255, 255, 255, 0.10); color: var(--white); }
/* Aktivní položka: modrá plocha + spodní proužek ve světlejším odstínu téže
   modré. Světlejší, ne tmavší — tmavý proužek by na tmavé hlavičce splynul
   s pozadím pod tlačítkem a zmizel. */
.main-nav a.is-active {
    background: var(--nav-active);
    color: var(--white);
    box-shadow: inset 0 -3px 0 var(--nav-active-line);
}
/* Aktivní stav se najetím nemění — už označuje, kde uživatel je. */
.main-nav a.is-active:hover { background: var(--nav-active); }

/* „Stažení" vystupuje z řady běžných odkazů — modré podbarvení jako CTA
   tlačítko, ale jen na homepage ($nav === ''). Na ostatních stránkách je
   to běžný odkaz, aby nekonkuroval aktivní položce menu. */
.main-nav a.main-nav__download {
    background: var(--accent);
    color: var(--white);
    font-weight: 600;
}
.main-nav a.main-nav__download:hover { background: var(--accent-hover); color: var(--white); }

/* Přepnutí na asoftis.com. Je to odchod z webu, ne další položka menu —
   proto oddělovač a tlumenější text než u ostatních odkazů. */
/* .main-nav__lang blok odstraněn — EN verze zatím není v plánu. */

.sub-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    min-width: 240px;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.has-sub:hover .sub-nav,
.has-sub:focus-within .sub-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
}
/* Odsazení zleva odlišuje podpoložky od hlavní úrovně — na mobilu se
   nepoužije, tam padding přebíjí pozdější `.main-nav a` v @media 860px. */
.sub-nav a { color: var(--dark); font-size: 1.05rem; padding-left: 26px; }
.sub-nav a:hover { background: var(--accent-soft); color: var(--accent); }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    width: 52px;
    height: 52px;
    padding: 0;
    cursor: pointer;
    margin-left: auto;
}
.nav-toggle__bar { width: 30px; height: 3px; background: var(--white); border-radius: 2px; }

.breadcrumb {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.95rem;
    padding: 10px 0;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }

/* --- Hero / homepage ---------------------------------------------------- */

/* Tmavý hero navazuje bez švu na hlavičku — jeden souvislý blok,
   ve kterém akcentové tlačítko jasně vede oko. */
.hero {
    position: relative;
    background: var(--dark);
    background-image: linear-gradient(165deg, var(--dark-2) 0%, var(--dark) 55%, var(--dark-3) 100%);
    color: var(--white);
    padding: 88px 0 64px;
    text-align: center;
    overflow: hidden;
}
.hero h1 { color: var(--white); max-width: 20ch; margin-inline: auto; }
/* Jedna rozostřená modrá skvrna vlevo nahoře — čistě CSS, žádný obrázek.
   Přes ni jemná mřížka, která ploše dodá strukturu bez dalšího objektu. */
.hero::before {
    content: "";
    position: absolute;
    width: 520px; height: 520px; top: -260px; left: -140px;
    border-radius: 50%;
    background: rgba(18, 91, 174, 0.38);
    filter: blur(90px);
    z-index: 0;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 56px 56px;
    /* Mřížka se ke krajům vytrácí, ať nepůsobí jako tapeta. */
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
    z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }
.hero p { max-width: 56ch; margin-inline: auto; font-size: 1.1rem; color: var(--text-onDark); }

.hero__cta { margin: 36px 0 40px; }
.btn--lg { min-height: 58px; padding: 16px 36px; font-size: 1.08rem; }

/* Odděleno vlasovou linkou — bez ní se výhody slévaly s odstavcem nad nimi. */
.trust-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 40px;
    margin: 0;
    padding: 28px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.trust-badges li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--text-onDark);
}
.trust-badges svg { flex-shrink: 0; color: var(--accent-glow); }

/* --- Jak na to (3 kroky) -------------------------------------------------- */

.steps { padding: 80px 0 24px; text-align: center; }
.steps__heading { margin-bottom: 48px; }
.steps__grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
.steps__item { display: flex; flex-direction: column; align-items: center; }
/* Číslo kroku jako typografie, ne jako barevný odznak — kolečko s výplní
   soupeřilo o pozornost s tlačítky. */
.steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--accent-line);
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.steps__item:hover .steps__num {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}
.steps__item h3 { margin-bottom: 8px; }
.steps__item p { max-width: 32ch; color: var(--text-muted); margin-bottom: 0; font-size: 1.02rem; }

/* Jedna produktová mřížka místo dřívějšího seznamu s ikonami + samostatné
   sekce s krabicemi. Krabice, cena i CTA jsou teď na jednom místě. */
.home-products {
    padding: 88px 0;
    scroll-margin-top: 90px;
    text-align: center;
}
.home-products__heading { margin-bottom: 6px; }
.home-products__note { color: var(--text-muted); margin-bottom: 48px; font-size: 1.02rem; }
.home-products__grid {
    display: grid;
    gap: 24px;
    /* 240px min — pod tím se dvouřádková cena láme za krabici. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    text-align: left;
}

.home-product {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px 24px;
    transition: border-color .18s ease;
}
.home-product:hover { border-color: var(--border-strong); }

/* Krabice sedí na společné účaří — bez pevné výšky by karty s vyšší
   krabicí posunuly název o kus níž než sousední. */
.home-product__media {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 168px;
    margin-bottom: 24px;
}
.home-product__media img {
    max-height: 100%;
    width: auto;
    border-radius: 4px;
    box-shadow: var(--shadow);
    transition: box-shadow .2s ease;
}
.home-product:hover .home-product__media img { box-shadow: var(--shadow-lg); }
.home-product__media .badge-soon {
    position: absolute;
    top: 0; right: 0;
    white-space: nowrap;
}

.home-product__name { font-size: 1.12rem; margin-bottom: 8px; }
.home-product__name a { color: var(--dark); }
.home-product__name a:hover { color: var(--accent); }
.home-product__perex { color: var(--text-muted); font-size: 1rem; margin-bottom: 20px; }

/* Patička drží cenu i tlačítko na společné úrovni napříč kartami. */
.home-product__footer { margin-top: auto; }
.home-product__price { margin-bottom: 16px; }
.home-product__price .price-new { font-size: 1.25rem; }
/* Zástupný text u nevydaného produktu drží stejnou výšku jako cena,
   aby tlačítka v řadě zůstala zarovnaná. */
.home-product__soon {
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.9;
}
.home-product .btn { width: 100%; }

.reference {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 72px 0;
    text-align: center;
}
.reference__slider { position: relative; min-height: 8.5em; }
.reference__item {
    max-width: 58ch;
    margin: 0 auto;
    font-size: 1.25rem;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--dark);
    display: none;
}
.reference__item.is-active { display: block; }
.reference cite { display: block; margin-top: 20px; font-style: normal; font-size: 0.95rem; color: var(--text-muted); }

.reference__dots { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.reference__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: var(--border-strong);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.reference__dot.is-active { background: var(--accent); transform: scale(1.25); }

/* --- Page head shared ---------------------------------------------------- */

.page-head { padding: 64px 0 40px; text-align: center; }
.page-head h1 { margin-bottom: 0.4em; }
.page-head p { max-width: 58ch; margin-inline: auto; color: var(--text-muted); font-size: 1.08rem; }
.tagline { color: var(--accent); font-weight: 600; }

/* --- Download list (Stažení) ----------------------------------------- */

.download-list {
    display: grid;
    gap: 20px;
    padding: 8px 20px 72px;
    /* 320px min — karta má vodorovné ikonu+text, užší sloupec by mačkal text vedle ikony. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.download-card {
    display: flex;
    gap: 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: border-color .18s ease, background .18s ease;
}
/* Najetí mění obrys a podklad — karta zůstává na místě. */
.download-card:hover {
    border-color: var(--accent-line);
    background: var(--accent-soft);
}
.download-card__media { flex-shrink: 0; position: relative; }
.download-card__media img { border-radius: var(--radius); }
.download-card__media .badge-soon { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* Bez min-width:0 flex položka nezalamuje text, ale přetéká z karty ven.
   Sloupcový flex, aby šla dvojice meta + tlačítko odsunout na dno karty. */
.download-card__body { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; }

.download-card h2 { font-size: 1.2rem; margin-bottom: 6px; }
.download-card h2 a { color: var(--dark); }
.download-card h2 a:hover { color: var(--accent); }
.download-card p { color: var(--text-muted); font-size: 1.02rem; }
/* margin-top:auto sebere volné místo nad metem — perexy různé délky pak
   nerozhazují výšku tlačítka a Stáhnout sedí u všech karet v řádku stejně. */
.download-card__meta { margin-top: auto; font-size: 1rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px; }
/* Bez tohohle by roztáhlo tlačítko přes celou šířku karty (stretch). */
.download-card__body > .btn { align-self: flex-start; }

/* --- Katalog produktů (/produkty/) ------------------------------------
   Dřív to byl seznam s 90px ikonou vedle textu — vedle úvodní stránky
   s krabicemi vypadal katalog jako méně důležitá podstránka. Teď nese
   stejné krabice a u čtyř produktů drží mřížku 2×2, takže stránka
   nekončí dlouhým sloupcem karet.                                       */

.product-grid {
    display: grid;
    gap: 24px;
    padding: 8px 20px 72px;
    grid-template-columns: 1fr;
    align-items: stretch;
}

.product-card {
    display: flex;
    gap: 28px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px;
    /* Podklad zůstává bílý — krabice je vyrenderovaná na bílé a na barevném
       podkladu by kolem ní vyskočil obdélník. Najetí nese jen obrys a stín. */
    transition: border-color .18s ease, box-shadow .18s ease;
}
.product-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

.product-card__media {
    position: relative;
    flex-shrink: 0;
    width: 132px;
    align-self: flex-start;
}
.product-card__media img { width: 100%; }
.product-card__media .badge-soon { position: absolute; top: 0; left: 0; white-space: nowrap; }

.product-card__body { display: flex; flex-direction: column; flex: 1 1 0%; min-width: 0; }
.product-card h2 { font-size: 1.2rem; margin-bottom: 4px; }
.product-card h2 a { color: var(--dark); }
.product-card h2 a:hover { color: var(--accent); }
.product-card__meta {
    font-size: 0.92rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.45;
}
.product-card__perex { color: var(--text-muted); font-size: 1.02rem; }
.product-card__soon { color: var(--text-muted); font-size: 1rem; margin-bottom: 14px; }

/* Patička drží cenu i tlačítka na společné úrovni napříč kartami bez ohledu
   na délku perexu — jinak by každá karta měla CTA jinde. */
.product-card__footer { margin-top: auto; padding-top: 18px; }
.product-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 16px;
}
.product-card__price .price-old { margin-right: 0; }
.product-card__price .price-new { font-size: 1.35rem; letter-spacing: -0.01em; }
.product-card__price .price-sale { margin-left: 0; }
.product-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Užší vnitřní odsazení — dvě plná tlačítka se do sloupce mřížky nevejdou. */
.product-card__actions .btn { flex: 1 1 auto; padding-inline: 18px; }

.price-old { text-decoration: line-through; color: var(--text-muted); margin-right: 8px; }
.price-new { color: var(--danger); font-weight: 700; font-size: 1.1rem; }
.price-sale { color: var(--danger); font-weight: 600; margin-left: 8px; }

/* --- Ceník (/shop/) ------------------------------------------------------ */

/* Řádkový ceník místo mřížky krabic — ta se dřív tloukla s katalogem
   na /produkty/ a obě stránky vypadaly stejně. */
.price-list { padding: 8px 20px 16px; }
.price-row {
    display: grid;
    gap: 8px 20px;
    /* Mobil: krabice vlevo přes celou výšku řádku, název, cena a akce
       pod sebou vpravo. Bez explicitního umístění by je auto-flow rozházel
       do obou sloupců. */
    grid-template-columns: 64px 1fr;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
}
.price-row__media { grid-column: 1; grid-row: span 3; align-self: start; }
.price-row__media img { width: 100%; }
.price-row__product,
.price-row__price,
.price-row__action { grid-column: 2; }
.price-row:first-child { border-top: 1px solid var(--border); }
.price-row--soon { opacity: 0.72; }
.price-row__product h2 { font-size: 1.2rem; margin-bottom: 4px; }
.price-row__product h2 a { color: var(--dark); }
.price-row__product h2 a:hover { color: var(--accent); }
.price-row__product p { color: var(--text-muted); font-size: 1.02rem; margin-bottom: 0; }
.price-row__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.price-row__price .price-old,
.price-row__price .price-sale { margin: 0; }
.price-row__price .price-new { font-size: 1.45rem; letter-spacing: -0.01em; }
.price-row__action { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.price-row__try { font-size: 0.94rem; color: var(--text-muted); }
/* Produkt vydaný ke stažení, ale ještě ne v prodeji — místo ceny jen zpráva. */
.price-row__soon { font-size: 1.05rem; font-weight: 600; color: var(--text-muted); }

/* FAQ na stránce Shop i na produktových detailech — stejné chování,
   jiný kontext. Společný selektor drží pravidla na jednom místě. */
.shop-faq, .product-faq { padding-bottom: 72px; }
/* Na produktové stránce následuje FAQ hned po sekci .steps, která má dole
   jen 24px padding. Bez horního odsazení by nadpisy „Jak…" a „Časté dotazy"
   stály příliš blízko sebe. */
.product-faq { padding-top: 56px; }
.shop-faq > h2, .product-faq > h2 { margin-bottom: 32px; }
/* Ikonka jako značka sekce — vysoká jako text nadpisu, ne jako samostatný prvek. */
.product-faq > h2 { display: flex; align-items: center; gap: 12px; }
.product-faq > h2 img { flex: none; width: auto; height: 1em; }
.shop-faq__grid, .product-faq__grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
.shop-faq__grid h3, .product-faq__grid h3 { font-size: 1.05rem; margin-bottom: 6px; }
.shop-faq__grid p, .product-faq__grid p { color: var(--text-muted); margin-bottom: 0; }

/* --- Srovnávací tabulka programů (/produkty/) ---------------------------- */

.product-compare { padding: 64px 0 16px; }
.product-compare > h2 { margin-bottom: 8px; }
.product-compare__lead { color: var(--text-muted); margin-bottom: 28px; }
/* Tabulka se na úzkém displeji překlápí na karty (viz media query níž), tenhle
   obal je pojistka pro mezistavy — vodorovně roluje tabulka, ne celá stránka. */
.product-compare__scroll { overflow-x: auto; }
.product-compare__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border: 1px solid var(--border);
}
.product-compare__table th,
.product-compare__table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--border);
    font-size: 0.98rem;
    color: var(--text-muted);
}
.product-compare__table thead th {
    border-top: 0;
    background: var(--bg);
    color: var(--dark);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}
.product-compare__table tbody th { color: var(--dark); font-weight: 700; }
.product-compare__table tbody th a { color: inherit; text-decoration: none; }
.product-compare__table tbody th a:hover { color: var(--accent); text-decoration: underline; }
.product-compare__table strong { color: var(--dark); }
.product-compare__old { text-decoration: line-through; opacity: .6; white-space: nowrap; }
.product-compare__note { margin-top: 20px; color: var(--text-muted); font-size: 0.95rem; }

/* Pro koho je program — výčet situací, ne vlastností. Dvousloupcový na širokém
   displeji (viz media query níž), aby šest položek nedělalo dlouhý sloupec. */
.product-audience { padding: 56px 0 8px; }
.product-audience > h2 { margin-bottom: 8px; }
.product-audience__lead { color: var(--text-muted); margin-bottom: 24px; }
.product-audience__list {
    display: grid;
    gap: 12px 32px;
    grid-template-columns: 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
}
.product-audience__list li {
    position: relative;
    padding-left: 30px;
    color: var(--text-muted);
}
/* Fajfka jako odrážka — vlastní SVG v pozadí, žádná ikonová sada navíc. */
.product-audience__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 18px;
    height: 18px;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f8f4e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* --- Děkovací stránka po stažení ----------------------------------------- */

.thanks__fallback { font-size: 0.98rem; }
.thanks-steps { padding-bottom: 8px; }

.odber {
    padding: 48px 20px 56px;
    max-width: 680px;
    text-align: center;
}
.odber h2 { font-size: 1.5rem; margin-bottom: 10px; }
.odber > p { color: var(--text-muted); }
.odber__form { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 24px; text-align: left; }
.odber__form input[type="email"] {
    width: 100%;
    padding: 13px 16px;
    font: inherit;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}
.odber__souhlas {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.odber__souhlas input { margin-top: 3px; flex-shrink: 0; }
.odber__poznamka { font-size: 0.92rem; color: var(--text-muted); margin-top: 12px; }

/* Tlačítka pod textem na potvrzovací a odhlašovací stránce. */
.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding-bottom: 64px;
}

/* --- Product detail ------------------------------------------------------ */

/* Světlý neutrální hero — snímek programu musí zůstat čitelný, barevná
   plocha pod ním ho dřív přebíjela. Akcent nese jen horní linka. */
.product-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 64px 0;
}
.product-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}
/* Krabice je vyrenderovaná na bílém podkladu — rámeček i stín kolem ní
   působily jako orámovaný snímek obrazovky, ne jako produkt. Multiply
   „vyřízne" bílou plochu, takže krabice splyne s pozadím hero sekce
   a může se roztáhnout až do nativních 800 px souboru. */
.product-hero__media img {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    mix-blend-mode: multiply;
}
/* Přímá odpověď pod H1 — co program je, v jedné větě. Odsazená a o něco
   větší než odrážky pod ní, aby bylo poznat, že jde o shrnutí, ne o další
   položku výčtu. */
.product-hero__lead {
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Odrážky bez puntíků — místo nich modrá zaškrtávací linka vlevo.
   Klasické disc odrážky vedle nadpisu působily jako neformátovaný text. */
.product-hero__bullets { list-style: none; padding: 0; margin: 0 0 4px; }
.product-hero__bullets li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 1.05rem;
}
.product-hero__bullets li::before {
    content: "";
    position: absolute;
    left: 4px; top: 0.62em;
    width: 11px; height: 6px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}
/* Cenový blok v heru — sleva je hlavní argument, patří k rozhodnutí. */
.product-hero__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-strong);
}
.product-hero__price .price-old { margin-right: 0; font-size: 1.05rem; }
.product-hero__price .price-new { font-size: 2.1rem; letter-spacing: -0.02em; line-height: 1; }
.product-hero__save {
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.product-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }

/* Fakta oddělená svislicemi — kompaktní shrnutí, úplný list je v .product-meta. */
.product-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 20px 0 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.product-hero__facts span { display: flex; align-items: center; }
.product-hero__facts span + span::before {
    content: "";
    width: 1px;
    height: 1em;
    margin-right: 18px;
    background: var(--border-strong);
}

.product-body { padding: 72px 0; }
/* Text článku má vlastní míru — přes celých 1180px se čte špatně. */
.product-body > p, .product-body > h2 { max-width: 72ch; }
.product-body h2 { margin-top: 1.6em; }
.product-body > h2:first-child { margin-top: 0; }

.feature-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin: 40px 0; }
.feature-grid__col {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 30px;
}
/* Nadpis sloupce jako popiska, ne jako další úroveň nadpisu. */
.feature-grid__col h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
}
/* Ikonka jen jako značka nadpisu — vysoká přesně jako text popisky,
   proto 1em a flex: none, aby ji zúžení sloupce nezmáčklo. */
.feature-grid__col h3 img {
    flex: none;
    width: auto;
    height: 1em;
}
.feature-grid__col ul { padding-left: 1.2em; margin-bottom: 0; }
.feature-grid__col li { margin-bottom: 10px; color: var(--text-muted); font-size: 1.02rem; }
.feature-grid__col li:last-child { margin-bottom: 0; }

/* Snímek aplikace stojí na stránce volně. Každé okno má vlastní barevný rám
   (modrý či šedý titulkový pruh), takže se s bílým pozadím nemá jak slít —
   plotna kolem něj i vlastní obrys navíc působily jako rámeček v rámečku.
   Zůstává jen měkký stín, aby snímek ležel nad stránkou, ne v ní. */
.screen-block {
    margin: 56px 0;
    text-align: center;
}
.screen-block img {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 0 auto;
}
/* Popiska pod snímkem — jen tam, kde snímek stojí mimo produktový text
   (např. průběh vypalování pod třemi kroky) a sám o sobě nemá kontext. */
.screen-block figcaption {
    max-width: 62ch;
    margin: 14px auto 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Doplňkový „usage" obrázek — menší váha než .screen-block, obtékán textem.
   Na širokém displeji vpravo od úvodního textu, na mobilu nad textem
   na plnou šířku (ale stále menší než hlavní produktový snímek). */
.screen-aside {
    float: right;
    width: 320px;
    max-width: 45%;
    margin: 6px 0 18px 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    background: var(--surface);
}
.screen-aside img {
    width: 100%;
    border-radius: var(--radius);
    display: block;
}
.screen-aside figcaption {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Mírně větší varianta doplňkového obrázku — jen tam, kde úvodní text
   tvoří dva delší odstavce a výchozí 320px by zanechávalo moc prázdného
   místa vpravo. Stále podpůrný vizuál, ne hlavní snímek. */
.screen-aside--lg {
    width: 480px;
    max-width: 58%;
}

/* --- Lightbox (zvětšení hlavního app screenshotu) -------------------
   Progresivní vylepšení: bez JS zůstává snímek běžně vidět v .screen-block.
   Až main.js přidá na <html> třídu .js-lightbox, obrázek se stane klikací
   a otevře se v tmavém překrytí. Na stránce je vždy jen jeden takový snímek,
   takže žádná galerie ani šipky. */
.js-lightbox .screen-block img {
    cursor: zoom-in;
}
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(16, 24, 40, 0.85);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.lightbox.is-open {
    opacity: 1;
    visibility: visible;
}
.lightbox__img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    cursor: zoom-out;
}
.lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    color: var(--white);
    background: rgba(0, 0, 0, 0.35);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s ease;
}
.lightbox__close:hover {
    background: rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: reduce) {
    .lightbox {
        transition: none;
    }
}

.feature-list {
    display: grid;
    gap: 40px 48px;
    grid-template-columns: 1fr;
    margin: 48px 0 0;
    padding-top: 48px;
    border-top: 1px solid var(--border);
}
.feature-list__item { display: flex; gap: 20px; align-items: flex-start; }
.feature-list__item img { width: 52px; height: 52px; flex-shrink: 0; border-radius: 10px; }
.feature-list__item h3 { margin-bottom: 8px; font-size: 1.1rem; }
.feature-list__item p { color: var(--text-muted); margin-bottom: 0; font-size: 1.02rem; }

.product-meta {
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0;
}
/* Technické údaje jako tabulka dělená svislicemi — vypadá to jako datový
   list programu, ne jako další čtyři karty. */
/* Dělicí linky dělá 1px mezera s podbarvením, ne border na buňkách. Údajů je
   po rozšíření datového listu tolik, že se mřížka zalamuje — s border-left by
   každý další řádek začínal svislicí u levého okraje, což vypadá jako chyba.
   Takhle vzniknou čáry vodorovně i svisle, ať se položky zalomí kdekoliv. */
.product-meta__grid {
    display: grid;
    gap: 1px;
    background: var(--border);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.product-meta__grid > div {
    padding: 28px 24px;
    background: var(--white);
}
.product-meta__grid span {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.product-meta__grid strong { font-size: 1.02rem; color: var(--dark); font-weight: 600; }

.product-cta {
    background: var(--dark);
    background-image: linear-gradient(165deg, var(--dark-2), var(--dark-3));
    color: var(--white);
    padding: 52px 0;
}
.product-cta__inner { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: center; }
.product-cta__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
    padding-right: 32px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}
/* Varianta bez ceny (nevydaný produkt) — jen sdělení a jedno tlačítko. */
.product-cta__inner--soon { gap: 28px; }
.product-cta__soon { margin: 0; max-width: 46ch; color: var(--text-onDark); text-align: center; }

.product-cta .price-old { color: #8B9099; margin-right: 0; font-size: 0.95rem; }
.product-cta .price-new { color: var(--white); font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.2; }
.product-cta .price-sale { color: var(--accent-glow); margin-left: 0; font-size: 0.92rem; }

/* --- Support form -------------------------------------------------------- */

.support-layout {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    padding-bottom: 72px;
}
.support-help p { font-size: 1.05rem; color: var(--text-muted); }
.support-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 28px;
    border-radius: var(--radius-lg);
}
.support-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 1.02rem; }
.support-form input,
.support-form select,
.support-form textarea {
    font: inherit;
    min-height: 52px;
    padding: 12px 14px;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--white);
    transition: border-color .15s ease;
}
.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus { border-color: var(--accent); }
.support-form textarea { resize: vertical; }
.support-form__note { font-size: 0.95rem; color: var(--text-muted); margin: 0; }

.msg { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; }
.msg--error { background: #FFE9E9; border: 1px solid var(--danger); color: #8a0000; }
.msg--ok { background: #E7F7E9; border: 1px solid #2e7d32; color: #1b5e20; }
.msg--info { background: #E7F0FF; border: 1px solid #1565c0; color: #0d3c78; }
.msg--cancel { background: var(--accent-soft); border: 1px solid var(--accent); color: #7a4b00; }

/* --- Contact -------------------------------------------------------------- */

.contact-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    padding-bottom: 72px;
}
.contact-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
}
.contact-card p { font-size: 1.05rem; }

/* --- Error page ------------------------------------------------------------ */

.error-page { padding-bottom: 64px; }

/* --- Footer ----------------------------------------------------------------- */

.site-footer { background: var(--footer-bg); border-top: 1px solid var(--border); color: var(--text); margin-top: 0; }
.site-footer__grid {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 56px 20px;
}
.site-footer__col h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 16px; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer__col a { color: var(--text); font-size: 1.02rem; }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__social { display: flex; gap: 12px; margin: 0; }
.site-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: var(--white);
    border: 1px solid var(--border-strong);
    color: var(--dark);
    border-radius: 50%;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.site-footer__social a:hover { background: var(--dark); border-color: var(--dark); color: var(--white); }
.site-footer__tagline { margin-top: 20px; font-size: 0.98rem; color: var(--text-muted); }
.site-footer__logo { margin: 24px 0 0; line-height: 0; }
.site-footer__logo img { display: block; }

.site-footer__bottom { border-top: 1px solid var(--border-strong); }
.site-footer__bottom p { padding: 16px 0; margin: 0; font-size: 0.92rem; color: var(--text-muted); text-align: center; }
.site-footer__bottom a { color: var(--text-muted); text-decoration: underline; }

/* --- Responsive -------------------------------------------------------------- */

@media (min-width: 640px) {
    .product-hero__cta { justify-content: flex-start; }
}

@media (min-width: 780px) {
    /* Krabici dáváme víc místa než textu — bez rámečku unese větší formát. */
    .product-hero__grid { grid-template-columns: 1.15fr 1fr; }
    .feature-grid { grid-template-columns: 1fr 1fr; }
    .feature-list { grid-template-columns: 1fr 1fr; }
    .support-layout { grid-template-columns: 320px 1fr; }
    .steps__grid { grid-template-columns: repeat(3, 1fr); }
    .shop-faq__grid, .product-faq__grid { grid-template-columns: 1fr 1fr; }
    .product-audience__list { grid-template-columns: 1fr 1fr; }
    /* E-mail a tlačítko vedle sebe, souhlas přes celou šířku pod nimi. */
    .odber__form { grid-template-columns: 1fr auto; }
    .odber__souhlas { grid-column: 1 / -1; }
    /* Krabice + název – cena – akce na jednom řádku; cena i akce mají pevný
       sloupec, ať se částky napříč řádky zarovnají pod sebe. */
    .price-row { grid-template-columns: 84px 1fr 200px 210px; }
    .price-row__media { grid-row: 1; }
    .price-row__product,
    .price-row__price,
    .price-row__action { grid-column: auto; }
}

/* 980px, ne 780px — pod tím zbyde vedle krabice na text a dvě tlačítka
   necelých 200 px a karta se rozsype do sloupečku. */
@media (min-width: 980px) {
    .product-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    /* z-index nad .main-nav, jinak vysunuté menu tlačítko zakryje a druhým
       kliknutím na hamburger (typické gesto pro zavření) se nic nestane. */
    .nav-toggle { display: flex; position: relative; z-index: 60; }
    .main-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(320px, 84vw);
        height: 100vh;
        background: var(--dark);
        padding: 90px 24px 24px;
        transform: translateX(100%);
        transition: transform .3s ease;
        overflow-y: auto;
    }
    .main-nav.is-open { transform: translateX(0); }
    .main-nav > ul { flex-direction: column; gap: 6px; }
    /* V zásuvce je položka na plnou šířku — proužek jde k levé hraně. */
    .main-nav a.is-active { box-shadow: inset 3px 0 0 var(--nav-active-line); }
    .sub-nav {
        position: static;
        border: 0;
        box-shadow: none;
        background: rgba(255,255,255,.06);
        max-height: 0;
        margin-top: 0;
        padding: 0 8px;
        min-width: 0;
        overflow: hidden;
        transition: max-height .25s ease, margin-top .25s ease, padding .25s ease, opacity .2s ease, transform .2s ease, visibility 0s linear .25s;
    }
    /* Na mobilu rozbaluje první klik na „Produkty" (viz main.js). */
    .sub-nav.is-open {
        max-height: 280px;
        margin-top: 4px;
        padding: 8px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition-delay: 0s;
    }
    .main-nav a { padding: 14px 16px; font-size: 1.15rem; }
    .sub-nav a { color: var(--white); }
    .sub-nav a:hover { background: rgba(255,255,255,.10); color: var(--white); }
    /* .main-nav__lang mobilní pravidla odstraněna spolu s blokem. */
}

@media (max-width: 520px) {
    .hero { padding: 52px 0 44px; }
    /* Na mobilu byl obsah produktu moc u krajů — zúžení horizontálního
       paddingu z 20px (.wrap) na 10px dává textu více oddechového prostoru. */
    .product-body { padding: 72px 10px; }
    /* Usage obrázek na mobilu nad textem, bez obtečení — na úzkém displeji
       by float zkrátil řádky textu na nečitelnou míru. Selektor cílí i na
       .screen-aside--lg, jinak by větší šířka z desktopu zůstala viset. */
    .screen-aside,
    .screen-aside--lg {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 24px;
    }
    .product-cta__inner { flex-direction: column; text-align: center; }
    /* Ve sloupci by svislý oddělovač visel vedle ceny do prázdna. */
    .product-cta__price {
        margin-right: 0;
        padding-right: 0;
        padding-bottom: 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        width: 100%;
    }
    .feature-list__item { flex-direction: column; }
    /* Na úzkém mobilu jde ikona nad text, ať se karta nemačká do sloupečku. */
    .download-card { flex-direction: column; }
    .download-card__media { align-self: flex-start; }
    /* Katalogová krabice je úzká — na mobilu ji zmenšíme a necháme vedle textu. */
    .product-card { gap: 18px; padding: 22px; }
    .product-card__media { width: 96px; }
    /* Tlačítka na plnou šířku — na úzkém displeji je to pohodlnější cíl. */
    .product-hero__cta .btn, .product-cta .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Cookie lišta

   Drží se principu webu: vede linka, ne stín. Lišta má jen horní obrys
   a jemné vrstvení — je to plovoucí vrstva nad obsahem, ne modální okno.
   Web pod ní zůstává plně použitelný, nic se nepřekrývá ani neblokuje.
   --------------------------------------------------------------------------- */

.cookie-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--white);
    border-top: 2px solid var(--accent);
    box-shadow: var(--shadow-lg);
    /* Na nízkém displeji se dlouhé nastavení musí dát odrolovat. */
    max-height: 90vh;
    overflow-y: auto;
}

.cookie-bar.is-open { display: block; }

.cookie-bar__inner { padding: 14px 20px; }

/* Text a tlačítka vedle sebe na jednom řádku — lišta tak zabírá ~70 px
   místo dřívějších ~190 px a nepřekrývá obsah stránky. */
.cookie-bar__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.cookie-bar__text { max-width: 82ch; }

.cookie-bar__text h2 {
    margin: 0 0 2px;
    font-size: 1.02rem;
    line-height: 1.3;
}

.cookie-bar__text p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.cookie-bar__text a { text-decoration: underline; }

.cookie-bar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

/* Odmítnout musí být stejně dostupné jako Přijmout — stejná velikost,
   stejné umístění, žádné schovávání pod odkaz. Vyžaduje to ÚOOÚ.
   V liště jsou obě tlačítka menší než jinde na webu, ale pořád nad
   44 px, což je doporučená minimální velikost dotykového cíle. */
.cookie-bar__actions .btn {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 0.94rem;
    white-space: nowrap;
}

/* Nastavení je odbočka k podrobnostem, ne třetí rovnocenná volba —
   proto odkaz, ne tlačítko. Vlastní styl, protože .btn--ghost je určený
   na tmavý podklad a měl by tu bílý text na bílé liště. */
.cookie-bar__link {
    background: none;
    border: 0;
    padding: 10px 8px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.cookie-bar__link:hover { color: var(--accent); }

/* POZOR: display na .cookie-settings přebíjí pravidlo prohlížeče
   [hidden] { display: none }, protože autorský styl má přednost před
   stylem prohlížeče. Bez řádku níž by byl panel vidět pořád a tlačítko
   Nastavení by nedělalo nic. */
.cookie-settings[hidden] { display: none; }

.cookie-settings {
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}

.cookie-option p {
    margin: 6px 0 0 30px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.cookie-option__head {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
}

.cookie-option__head input {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
    flex: none;
    margin: 0;
}

.cookie-option__head input:disabled { cursor: not-allowed; }

.cookie-option__always {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--accent);
    vertical-align: middle;
}

/* Uložit nastavení sedí přes celou šířku mřížky, ne v posledním sloupci. */
.cookie-settings__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-top: 4px;
}

.cookie-settings__actions a {
    font-size: 0.92rem;
    text-decoration: underline;
}

/* Jakmile se text s tlačítky přestane vejít na řádek, jdou tlačítka pod text. */
@media (max-width: 900px) {
    .cookie-bar__main {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .cookie-bar__actions { flex-wrap: wrap; }
    .cookie-bar__actions .btn { flex: 1 1 auto; }
}

/* Srovnávací tabulka na mobilu: pět sloupců se stranou neurolují rozumně, tak
   se každý řádek překlopí na kartu. Popisky sloupců nese data-label na buňkách
   (viz AGENTS.md), hlavička se schová — jinak by se opakovala nad každou kartou. */
@media (max-width: 620px) {
    .product-compare__table thead { display: none; }
    .product-compare__table,
    .product-compare__table tbody,
    .product-compare__table tr,
    .product-compare__table th,
    .product-compare__table td { display: block; width: 100%; }
    .product-compare__table tr {
        border-top: 1px solid var(--border);
        padding: 8px 0;
    }
    .product-compare__table tbody tr:first-child { border-top: 0; }
    .product-compare__table th,
    .product-compare__table td { border-top: 0; padding: 6px 16px; }
    .product-compare__table tbody th { font-size: 1.05rem; padding-top: 14px; }
    .product-compare__table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--text-muted);
        opacity: .75;
        margin-bottom: 2px;
    }
}

@media (max-width: 620px) {
    .cookie-bar__inner { padding: 14px 16px; }
    /* Na mobilu tlačítka na plnou šířku — palcem se to trefuje líp. */
    .cookie-bar__actions .btn { flex: 1 1 100%; }
    .cookie-bar__link { width: 100%; text-align: center; }
    .cookie-settings__actions .btn { width: 100%; }
}

/* Tabulka cookies na stránce se zásadami. Na mobilu se odroluje stranou,
   místo aby rozbila šířku stránky. */
.cookie-table-wrap {
    overflow-x: auto;
    margin: 24px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.cookie-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.cookie-table th,
.cookie-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.cookie-table th {
    background: var(--surface);
    font-weight: 600;
    white-space: nowrap;
}

.cookie-table tr:last-child td { border-bottom: 0; }

/* Textové právní stránky — užší sloupec se čte podstatně líp. */
.legal-page { max-width: 76ch; padding-bottom: 64px; }
.legal-page h2 { margin-top: 1.8em; }
.legal-page h3 { margin-top: 1.4em; font-size: 1.08rem; }
.legal-page__updated { color: var(--text-muted); font-size: 0.92rem; }

/* Rolovací šipka nahoru — fixována vpravo dole, skrytá dokud uživatel
   neodskroluje. Viz main.js (#scrollTopBtn). */
.scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--white);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, background .15s ease;
    z-index: 100;
}
.scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.scroll-top:hover { background: var(--accent-hover); }
.scroll-top.is-scrolling svg { animation: scroll-top-arrow .55s ease; }

@keyframes scroll-top-arrow {
    50% { transform: translateY(-4px); }
}

@media (max-width: 520px) {
    .scroll-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}