/* css.landing - spoločný štýl predajných stránok (úvodov) pod obalom .lp
   Keyref: css.landing, poradie: 50, scope: lp (každý selektor začína obalom .lp).
   Zdroj: zjednotené bloky style z článkov 3325 (sk), 3493 (cs), 4242 (en) Pokladňa
          a 1736 (sk), 1735 (cs), 1734 (en) POS Mobile; skript icons-ready z 3493 a 4242.
   Dátum: 2026-10-01
   Návrh: docs/navrh-2-spolocne-styly.md §5.6, §6.2, §7; rozhodnutia C1, G2, G3
          v docs/navrh-otvorene-otazky.md. Popis migrácie: docs/navrh-2-migracia/README.md.
   Zlom mobil/desktop: (max-width: 768px) / (min-width: 769px). Malé mobily: (max-width: 480px).
   Ikony: triedy lp-icon a lp-icon-MENO sú v štýle css.icons (poradie 40).
   Na konci je časť @deprecated: hide-small/show-small so zlomom 770 px ako téma a icons-ready
   (bloky lp-legacy-visibility, lp-legacy-icons). Aliasy starých tried (blok lp-legacy) sú po
   kroku 2 zmazané (2026-10-04).
   Vypustené zo starých blokov: .page, main, .container (v článkoch nepoužité), #sec-top-1:before
   (v článkoch nie je #sec-top-1), #pm-edicie .price span (vykresľujú ho vložené články cez
   modul, tie majú vlastnú kópiu pravidla), .feature-title, .feature-icon, .feature-list
   (nepoužité, nové lp-card-title, lp-card-icon, lp-card-list).
*/


/* @block lp-base
   @title Obal predajnej stránky
   @category Základ
   @desc Obal .lp okolo celého obsahu článku. Definuje premenné --lp-*, farbu odkazov
   a orámovanie pri ovládaní klávesnicou. Obrázky v obale nepresiahnu šírku stĺpca
   (náhrada pravidla témy article.ezop-page > section div img, ktoré obal preruší).
   Pozadia blokov idú na celú šírku okna (100vw), preto stránka s obalom má
   overflow-x: clip a nevznikne vodorovný posuvník.
   Farba odkazov má nízku váhu (:where), aby neprebila tlačidlá témy (.btn a).
   @example
   <div class="lp">
   <section class="lp-hero">...</section>
   </div>
   @end */
.lp {
    --lp-color-primary: #fff;
    --lp-color-primary-dark: #005d96;
    --lp-color-accent: #f59b24;
    --lp-color-bg: #ffffff;
    --lp-color-surface: #ffffff;
    --lp-color-text: #222632;
    --lp-color-text-muted: #6c7385;
    --lp-color-link: #43b7d8;
    --lp-color-green: #5cbc42;
    --lp-color-blue: #43b7d8;
    --lp-color-dark: #121e33;
    --lp-color-light: #f8faff;
    --lp-color-star: #faf004;
    --lp-color-hover: #ffa549;
    --lp-color-gray: #808080;
    --lp-radius-lg: 16px;
    --lp-font-head: Verdana, Geneva, sans-serif;
    --lp-font-alt: "Trebuchet MS", Geneva, sans-serif;
}
html:has(.lp) { overflow-x: clip; }
.lp :where(a) {
    color: var(--lp-color-link);
    text-decoration: none;
}
.lp a:focus-visible {
    outline: 3px solid var(--lp-color-link);
    outline-offset: 3px;
    border-radius: 3px;
}
.lp img { max-width: 100%; height: auto; }


/* @block lp-hero
   @title Hero
   @category Hero
   @desc Úvodná sekcia: nadpis, perex, tlačidlo, čísla a obrázok. Používa stĺpce
   témy cont, cont50, cont-l, cont-r. Desktop: text vľavo, obrázok vpravo
   (lp-hero-media). Mobil do 768 px: pravý stĺpec sa skryje, medzi perexom
   a tlačidlom sa zobrazí lp-hero-img, lp-hero-stats sa skryje a lp-hero-note
   (krátka veta v perexe) sa zobrazí. Tlačidlo (lp-hero-cta, alebo .btn z modulu)
   je na mobile predvolene vľavo ako v 3325; lp-hero--center ho vycentruje
   (3493, 4242, 1736, 1735, 1734). lp-hero--btn-lg drží písmo tlačidla 17 px
   na mobile a 1.3rem na desktope, aby sa nezmenšovalo s písmom sekcie (3325).
   Nadpis mení veľkosť podľa šírky stĺpca (container query), pozri lp-h1.
   @modifier lp-hero--center Tlačidlo na mobile v strede
   @modifier lp-hero--btn-lg Pevná veľkosť písma tlačidla
   @example
   <section class="lp-hero lp-hero--center">
   <div class="cont">
   <div class="cont50 cont-l">
   <h1 class="lp-h1">Pokladničný systém <span class="lp-h1-line2">pre úspešný rast</span></h1>
   <p class="lp-hero-lead">Predávajte jednoducho, podnikajte naplno. <span class="lp-hero-note">20 rokov na trhu, tisíce klientov.</span></p>
   <div class="lp-hero-img"><img src="/userdata/pages/gb10tc/iKelp_hero_trzby.jpg" alt="Pokladničný systém iKelp na mobile" width="900" height="733"></div>
   <div class="lp-hero-cta"><div class="btn"><a href="/pokladna/cennik" data-ga-event="Web|Pokladna|Pokladna - hero">VYŽIADAŤ PONUKU</a></div></div>
   <div class="lp-hero-stats"><div class="lp-stat"><strong>20+</strong> rokov skúseností</div><div class="lp-stat"><strong>3 600+</strong> spokojných klientov</div></div>
   </div>
   <div class="cont50 cont-r lp-hero-media"><img src="/userdata/pages/gb10tc/iKelp_hero_trzby.jpg" alt="Pokladničný systém iKelp s platobným terminálom" width="900" height="733"></div>
   </div>
   </section>
   @end */
.lp .lp-hero .cont50.cont-l { container-type: inline-size; }
.lp .lp-hero-lead {
    text-align: left;
    padding: 0 0.5em 1.5em 0;
    margin: 0;
    font-size: large;
}
.lp .lp-hero-note {
    display: none;
    font-family: var(--lp-font-alt);
    font-weight: bold;
}
.lp .lp-hero-img { display: none; }
.lp .lp-hero-media img { padding: 0; }
.lp .lp-hero-img img { display: block; margin: 0 0 1.5em; }
.lp .lp-hero-cta {
    max-width: 380px;
    padding: 1em 0 8px;
    text-align: left;
}
.lp .lp-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0 3em;
    margin-top: 1.5em;
    font-size: small;
}
.lp .lp-stat strong {
    display: block;
    font-family: var(--lp-font-head);
    font-size: x-large;
}
@media (min-width: 769px) {
    .lp .lp-hero .cont50.cont-l { padding-top: 30px; }
    .lp .lp-hero--btn-lg .btn a { font-size: 1.3rem; }
}
@media (max-width: 768px) {
    /* Tema sklada stlpce cont50 pod seba az pod 485 px; hero do 768 px vzdy na celu sirku (inak text len v lavej polovici). */
    .lp .lp-hero .cont50.cont-l,
    .lp .lp-hero .cont50.cont-r,
    .lp .lp-hero .lp-hero-img { float: none; width: 100%; }
    .lp .lp-hero .lp-hero-media { display: none; }
    .lp .lp-hero .lp-hero-img { display: block; }
    .lp .lp-hero .lp-hero-note { display: block; }
    .lp .lp-hero .lp-hero-stats { display: none; }
    .lp .lp-hero .lp-hero-cta,
    .lp .lp-hero .btn {
        clear: both;
        float: none;
        margin-inline: 0;
        text-align: left;
    }
    .lp .lp-hero--center .lp-hero-cta,
    .lp .lp-hero--center .btn {
        margin-inline: auto;
        text-align: center;
    }
    .lp .lp-hero--btn-lg .btn a { font-size: 17px; }
}


/* @block lp-h1
   @title Hlavný nadpis
   @category Hero
   @desc Nadpis H1 v hero. Veľkosť písma je 13 % šírky stĺpca (container query),
   najmenej 26 px a najviac 48 px, takže žiadne slovo nepretečie. lp-h1-line2 je
   druhý riadok: na desktope menší a na samostatnom riadku, na mobile pokračuje
   v texte rovnakou veľkosťou. Ak má mať mobil iný (kratší) druhý riadok, dajú sa
   dva riadky s modifikátormi lp-h1-line2--desktop a lp-h1-line2--mobile.
   Strop 50 px (1735, 1734) dáva lp-h1--l, 52 px (3493, 4242) lp-h1--xl.
   @modifier lp-h1--l Strop 50 px
   @modifier lp-h1--xl Strop 52 px
   @modifier lp-h1-line2--desktop Druhý riadok len na desktope
   @modifier lp-h1-line2--mobile Druhý riadok len na mobile
   @example
   <h1 class="lp-h1 lp-h1--xl">Pokladní systém <span class="lp-h1-line2 lp-h1-line2--desktop">pro růst podnikání</span> <span class="lp-h1-line2 lp-h1-line2--mobile">pro úspěšný růst</span></h1>
   @end */
.lp .lp-h1 {
    font-family: var(--lp-font-head);
    font-weight: bold;
    text-align: left;
    font-size: clamp(26px, 11vw, var(--lp-h1-max, 48px));
    font-size: clamp(26px, 13cqi, var(--lp-h1-max, 48px));
    line-height: 1.1;
    padding: 0.6em 0 0.5em 0;
    margin: 0;
}
.lp .lp-h1--l { --lp-h1-max: 50px; }
.lp .lp-h1--xl { --lp-h1-max: 52px; }
.lp .lp-h1 .lp-h1-line2 { font-size: 0.92em; line-height: 1.1; }
@media (min-width: 769px) {
    .lp .lp-h1 .lp-h1-line2 { display: block; margin-top: 0.05em; }
    .lp .lp-h1 .lp-h1-line2--mobile { display: none; }
}
@media (max-width: 768px) {
    /* Mobil: mensi strop, inak by H1 na celej sirke stlpca vyslo okolo 45-48 px. Strop meni --lp-h1-max-mobile. */
    .lp .lp-h1 { font-size: clamp(26px, 9cqi, var(--lp-h1-max-mobile, 34px)); }
    .lp .lp-h1 .lp-h1-line2 { display: inline; font-size: 1em; margin-top: 0; }
    .lp .lp-h1 .lp-h1-line2--desktop { display: none; }
}


/* @block lp-heading
   @title Nadpis sekcie
   @category Text
   @desc Malý nadpis nad sekciou (lp-kicker) a nadpis H2 (lp-h2) bez vložených
   štýlov písma. Zvýraznené slovo zelenou: lp-accent. Téma dáva nadpisom h2
   v sekcii veľké písmená a zarovnanie na stred; lp-h2 zarovná vľavo,
   lp-h2--center na stred, lp-h2--small je menší (x-large, ako blog a referencie).
   @modifier lp-h2--center Na stred
   @modifier lp-h2--small Menší nadpis
   @modifier lp-kicker--center Malý nadpis na stred
   @example
   <p class="lp-kicker">- Pre menšie aj väčšie prevádzky</p>
   <h2 class="lp-h2">Riešenia, ktoré uľahčia prácu a podporia <span class="lp-accent">tržby</span></h2>
   @end */
.lp .lp-kicker {
    font-size: small;
    text-transform: uppercase;
    margin: 1.5em 0 0;
}
.lp .lp-h2 {
    font-family: var(--lp-font-head);
    font-size: xx-large;
    font-weight: bold;
    text-align: left;
}
.lp .lp-h2--center { text-align: center; }
.lp .lp-kicker--center { text-align: center; }
.lp .lp-h2--small { font-size: x-large; }
.lp .lp-accent { color: var(--lp-color-green); }


/* @block lp-features
   @title Mriežka kariet
   @category Karty
   @desc Mriežka kariet lp-card, stĺpce najmenej 320 px (na desktope tri, na tablete
   dva). Do 480 px jeden stĺpec a karty široké 330 px na stred. Použitie: výhody
   systému, referencie zákazníkov (lp-stars).
   @example
   <div class="lp-features">
   <article class="lp-card">
   <p class="lp-card-title"><span class="lp-icon lp-icon-cast-connected" aria-hidden="true"></span> Vzdialená správa</p>
   <p class="lp-card-text">Aktualizácia cenníka a správa zariadení na diaľku.</p>
   </article>
   <article class="lp-card">
   <p class="lp-card-title"><span class="lp-icon lp-icon-dashboard" aria-hidden="true"></span> Štatistiky a reporty</p>
   <p class="lp-card-text">Tržby, obrat a trendy v reálnom čase.</p>
   </article>
   </div>
   @end */
.lp .lp-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}
@media (max-width: 480px) {
    .lp .lp-features { grid-template-columns: 1fr; gap: 10px; }
}


/* @block lp-card
   @title Karta
   @category Karty
   @desc Biela karta so zaoblením, tieňom a jemným modrým prechodom v rohu.
   Časti: lp-card-title (nadpis s ikonou, ikona zelená), lp-card-text (sivý text),
   lp-card-list (zoznam s bodkami), lp-card-icon (ikona v štvorčeku).
   Tlačidlo .btn ako priamy potomok karty sa zarovná na spodok.
   lp-card--dark je tmavá karta s bielym textom (dnes special-card s odkazmi
   na odvetvia); odkaz s lp-accent v nej ostane zelený. Text v tmavej karte má
   písmo Trebuchet MS veľkosti large.
   @modifier lp-card--dark Tmavá karta
   @example
   <div class="lp-features">
   <article class="lp-card">
   <span class="lp-card-icon"><span class="lp-icon lp-icon-devices" aria-hidden="true"></span></span>
   <p class="lp-card-title">Aj do vášho hardvéru</p>
   <p class="lp-card-text">Systém iKelp viete využívať aj vo vlastnom hardvéri.</p>
   <ul class="lp-card-list"><li>Pokladňa</li><li>Tablet</li></ul>
   <div class="btn lp-btn--outline"><a href="/pokladna/prenajom-hw-ponuka-pokladna-sk">PONUKA ZOSTÁV</a></div>
   </article>
   <article class="lp-card lp-card--dark">
   <p><span class="lp-icon lp-icon-local-mall" aria-hidden="true"></span> Viac pre <a href="/pokladna/riesenia/maloobchod-retail">maloobchod</a></p>
   <p><a class="lp-accent" href="/sk/funkcie">Zobraziť ďalšie funkcionality</a></p>
   </article>
   </div>
   @end */
.lp .lp-card {
    background: var(--lp-color-surface);
    border-radius: var(--lp-radius-lg);
    padding: 8px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.lp .lp-card > .btn { margin-top: auto; }
.lp .lp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 114, 188, 0.09), transparent 45%);
    opacity: 0.75;
    pointer-events: none;
}
.lp .lp-card .lp-icon { font-size: 24px; }
.lp .lp-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: rgba(0, 114, 188, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    color: var(--lp-color-green);
}
.lp .lp-card-icon .lp-icon { font-size: 1.2rem; }
.lp .lp-card-title {
    font-family: var(--lp-font-head);
    font-size: large;
    font-weight: bold;
    margin: 16px 0;
    position: relative;
    z-index: 1;
}
.lp .lp-card-title .lp-icon { color: var(--lp-color-green); }
.lp .lp-card-text {
    font-size: 0.88rem;
    color: var(--lp-color-text-muted);
    text-align: left;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.lp .lp-card-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}
.lp .lp-card-list li {
    font-size: 0.86rem;
    color: var(--lp-color-text);
    padding-left: 16px;
    position: relative;
    margin-bottom: 4px;
}
.lp .lp-card-list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--lp-color-green);
    font-size: 1rem;
    line-height: 1;
}
.lp .lp-card h3 a { display: inline-block; padding: 6px 0; }
.lp .lp-card--dark { background: var(--lp-color-dark); display: block; }
.lp .lp-card--dark,
.lp .lp-card--dark p,
.lp .lp-card--dark a,
.lp .lp-card--dark strong { color: #ffffff; }
.lp .lp-card--dark .lp-icon,
.lp .lp-card--dark .lp-accent { color: var(--lp-color-green); }
.lp .lp-card--dark p {
    font-family: var(--lp-font-alt);
    font-size: large;
}
@media (max-width: 480px) {
    .lp .lp-card { padding: 10px; width: 330px; margin: 0 auto; }
    .lp .lp-card-text,
    .lp .lp-card-list li { font-size: 12px; }
    .lp .lp-card-icon { width: 24px; height: 24px; font-size: 1rem; }
}


/* @block lp-tiles
   @title Dlaždice
   @category Karty
   @desc Tmavé dlaždice s krátkym odkazom (odvetvia, funkcie). Karty lp-card
   v lp-tiles sú tmavé s bielym textom, ikona zelená. Na desktope a tablete
   mriežka ako lp-features, do 480 px tri dlaždice vedľa seba v jednom riadku.
   @example
   <div class="lp-tiles">
   <article class="lp-card"><p><a href="/pokladna/riesenia/maloobchod-retail"><span class="lp-icon lp-icon-local-mall" aria-hidden="true"></span><br><strong>PRE RETAIL</strong></a></p></article>
   <article class="lp-card"><p><a href="/sk/"><span class="lp-icon lp-icon-fastfood" aria-hidden="true"></span><br><strong>PRE GASTRO</strong></a></p></article>
   <article class="lp-card"><p><a href="/pokladna/riesenia/sluzby-servisy"><span class="lp-icon lp-icon-dry-cleaning" aria-hidden="true"></span><br><strong>PRE SLUŽBY</strong></a></p></article>
   </div>
   @end */
.lp .lp-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}
.lp .lp-tiles > .lp-card { background: var(--lp-color-dark); }
.lp .lp-tiles .lp-card p,
.lp .lp-tiles .lp-card a,
.lp .lp-tiles .lp-card strong { color: #ffffff; }
.lp .lp-tiles .lp-card .lp-icon,
.lp .lp-tiles .lp-card .lp-accent { color: var(--lp-color-green); }
@media (max-width: 480px) {
    .lp .lp-tiles {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }
    .lp .lp-tiles > .lp-card {
        width: calc((90% - 12px) / 3);
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 10px 5px;
        border-radius: 8px;
        box-sizing: border-box;
        text-align: center;
    }
    .lp .lp-tiles > .lp-card p {
        margin: 0;
        text-align: center;
        font-size: 12px;
        line-height: 1.2;
    }
}


/* @block lp-btn
   @title Tlačidlá
   @category Tlačidlá
   @desc Varianty tlačidla témy (štruktúra div.btn a v ňom odkaz a). lp-btn--outline
   je biele so zeleným rámikom, po prejdení myšou zelené s bielym textom
   (dnes btn-secondary, napr. Získajte platobný terminál zadarmo). lp-btn--blue je
   modré (dnes btn-blue). Udalosť GA cez data-ga-event, nie onclick.
   @modifier lp-btn--outline Obrysové zelené
   @modifier lp-btn--blue Modré
   @modifier lp-btn--sm Menšie písmo (sekcia lp-promo)
   Stará trieda btn-blue ostáva, vykresľujú ju moduly (napr. newsletter) vo vložených článkoch.
   @example
   <div class="btn lp-btn--outline"><a href="/pokladna/cennik/platobny-terminal-zdarma" data-ga-event="Web|Pokladna|Pokladna - terminalzdarma">ZISTIŤ VIAC O PONUKE</a></div>
   <div class="btn lp-btn--blue"><a href="/pokladna/cennik">CENNÍK</a></div>
   @end */
.lp .lp-btn--outline a {
    background: #ffffff;
    color: var(--lp-color-green);
    box-shadow: inset 0 0 0 2px var(--lp-color-green);
}
.lp .lp-btn--outline a:hover,
.lp .lp-btn--outline a:focus {
    background: var(--lp-color-green);
    color: #ffffff;
}
.lp .btn.lp-btn--blue a { background-color: var(--lp-color-blue); }
.lp .lp-btn--sm { font-size: small; }
.lp .btn.btn-blue a { background-color: var(--lp-color-blue); }


/* @block lp-promo
   @title Akčná ponuka
   @category Sekcie
   @desc Sekcia s obrázkom vľavo a veľkým textom s tlačidlom vpravo (Získajte platobný
   terminál zadarmo). Používa stĺpce témy cont50, obrázok lp-promo-img má šírku 450 px.
   lp-promo-title je veľký text (nie nadpis), tučná časť je v strong, em je kurzíva písmom Trebuchet.
   Tlačidlo je vľavo; lp-promo--center zarovná text aj tlačidlo na stred (mobilná
   verzia bez obrázka, nadpis lp-h2 lp-h2--center).
   @modifier lp-promo--center Na stred
   @example
   <div class="cont lp-promo">
   <div class="cont50 cont-r">
   <p class="lp-promo-title"><strong>Získajte platobný terminál zadarmo.</strong> <em>Bez háčikov.</em></p>
   <div class="btn lp-btn--outline lp-btn--sm"><a href="/pokladna/cennik/platobny-terminal-zdarma" data-ga-event="Web|Pokladna|Pokladna - terminalzdarma">ZISTIŤ VIAC O PONUKE</a></div>
   </div>
   <div class="cont50 cont-l lp-promo-img"><img src="/userdata/pages/gb10tc/Terminal-zadarmo_SK.png" alt="Platobný terminál s vytlačeným dokladom" width="690" height="443"></div>
   </div>
   @end */
.lp .lp-promo-title {
    font-family: var(--lp-font-head);
    font-size: xx-large;
    font-weight: normal;
    line-height: 1.2;
    margin: 2em 0 1.5em;
}
.lp .lp-promo--center .lp-promo-title { margin: 1em 0 0.5em; }
.lp .lp-promo-title em {
    font-family: var(--lp-font-alt);
    font-weight: normal;
}
.lp .lp-promo-img img { width: 450px; }
.lp .lp-promo .btn { text-align: left; }
.lp .lp-promo--center,
.lp .lp-promo--center .btn { text-align: center; }


/* @block lp-bg
   @title Pozadie sekcie
   @category Pozadia
   @desc Farebné pozadie na celú šírku okna (pseudo prvok 100vw za obsahom), obsah
   ostáva v stĺpci stránky. lp-bg-light svetlé (#F8FAFF), lp-bg-blue modré
   s bielymi nadpismi a odkazmi, lp-bg-dark tmavé s bielym textom.
   @modifier lp-bg-light Svetlé
   @modifier lp-bg-blue Modré
   @modifier lp-bg-dark Tmavé
   @example
   <section>
   <div class="cont lp-bg-light">
   <h2 class="lp-h2 lp-h2--small">Články, novinky a rozhovory</h2>
   </div>
   </section>
   @end */
.lp .lp-bg-light,
.lp .lp-bg-blue,
.lp .lp-bg-dark { position: relative; }
.lp .lp-bg-light::before,
.lp .lp-bg-blue::before,
.lp .lp-bg-dark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    height: 100%;
    z-index: -1;
}
.lp .lp-bg-light::before { background-color: var(--lp-color-light); }
.lp .lp-bg-blue::before { background-color: var(--lp-color-blue); }
.lp .lp-bg-dark::before { background-color: var(--lp-color-dark); }
.lp .lp-bg-blue a,
.lp .lp-bg-blue h2 { color: #ffffff; }
.lp .lp-bg-blue a:hover { color: var(--lp-color-hover); }
.lp .lp-bg-dark,
.lp .lp-bg-dark h2,
.lp .lp-bg-dark a { color: #ffffff; }


/* @block lp-blog-link
   @title Odkaz na článok blogu
   @category Text
   @desc Sivý odkaz pod obrázkom článku so šípkou na konci, pri prejdení
   myšou podčiarknutý.
   @example
   <h3><a class="lp-blog-link" href="/pokladna/blog">AI asistent iKelp vám poradí kedykoľvek</a></h3>
   @end */
.lp .lp-blog-link {
    color: var(--lp-color-gray);
    display: inline-block;
    padding: 6px 0;
}
.lp .lp-blog-link::after { content: " \203A"; }
.lp h3 .lp-blog-link {
    font-family: var(--lp-font-alt);
    font-size: medium;
}
.lp .lp-blog-link:hover,
.lp .lp-blog-link:focus { text-decoration: underline; }


/* @block lp-stars
   @title Hodnotenie hviezdičkami
   @category Karty
   @desc Riadok žltých hviezdičiek v karte referencie (bez vloženého štýlu farby).
   @example
   <article class="lp-card">
   <p class="lp-stars"><span class="lp-icon lp-icon-star" aria-hidden="true"></span><span class="lp-icon lp-icon-star" aria-hidden="true"></span><span class="lp-icon lp-icon-star" aria-hidden="true"></span><span class="lp-icon lp-icon-star" aria-hidden="true"></span><span class="lp-icon lp-icon-star" aria-hidden="true"></span></p>
   <p>Všetko je to veľmi jednoduché. Odporúčam.</p>
   <p class="lp-card-text">Peter Kalina, majiteľ Olive You Bistro</p>
   </article>
   @end */
.lp .lp-stars { color: var(--lp-color-star); }
.lp .lp-stars .lp-icon { margin-right: 0.15em; }


/* @block lp-price
   @title Cena
   @category Text
   @desc Veľká cena v stĺpci edície (POS Mobile). Číslo v span je tučné 50pt,
   na mobile 35pt, do 480 px 24pt. Náhrada #pm-edicie .price z témy a článkov.
   @example
   <p class="lp-price"><span>19,90</span> EUR mesačne</p>
   @end */
.lp .lp-price {
    text-align: center;
    margin: 10px 0 15px;
    white-space: nowrap;
}
.lp .lp-price span {
    font-size: 50pt;
    margin: 0 15px;
    font-weight: bold;
}
@media (max-width: 768px) {
    .lp .lp-price span { font-size: 35pt; margin: 0 5px; }
}
@media (max-width: 480px) {
    .lp .lp-price span { font-size: 24pt; }
}


/* @block lp-logos
   @title Logá zákazníkov
   @category Referencie
   @desc Riadok lôg zákazníkov na stred, logá najviac 90 px, na mobile sa zalomia
   do viacerých riadkov (nahrádza vložené štýly obrázkov a samostatný obrázok
   lôg pre mobil).
   @example
   <div class="cont lp-bg-light">
   <p class="lp-logos"><img src="/userdata/pages/gb10tc/wings_logo-grj.png" alt="WINGS" width="169" height="169" loading="lazy"><img src="/userdata/pages/gb10tc/Wywar-new_logo-grj.png" alt="Wywar" width="140" height="140" loading="lazy"></p>
   </div>
   @end */
.lp .lp-logos {
    text-align: center;
    padding: 1.5em 0;
    margin: 0;
}
.lp .lp-logos img {
    max-width: 60px;
    height: auto;
    margin: 10px 45px;
    vertical-align: top;
}
@media (max-width: 480px) {
    .lp .lp-logos img { max-width: 70px; margin: 8px 12px; }
}


/* @block lp-spacer
   @title Medzera
   @category Základ
   @desc Zvislá medzera medzi sekciami namiesto prázdnych odsekov a nadpisov
   (prázdne H2 a H3 sú pre vyhľadávače šum).
   @example
   <div class="lp-spacer"></div>
   @end */
.lp .lp-spacer { height: 1.5em; }


/* ===================================================================
   @deprecated  Všetko nižšie je prechodné. Úvody používajú hide-small
   a show-small na desktopovú a mobilnú verziu sekcií (zlúčiť ich je
   redakčná úloha) a vložené články (kontakt) majú ikony Material Icons.
   Bloky zmazať po zlúčení sekcií a po kroku 3 (Material Icons preč).
   =================================================================== */

/* @block lp-legacy-visibility
   @title Staré hide-small a show-small
   @category Prechod
   @deprecated 2026-10-01 Nové bloky lp-* ich nepoužívajú (rozhodnutie C1).
   @desc Triedy témy hide-small a show-small pod obalom .lp so zlomom 770 px ako
   téma (Site.css). Dnes ich články prepisovali na 768/769 px pre celú stránku.
   span a a s show-small ostanú na mobile v riadku ako v téme.
   @example
   <div class="hide-small"><p>Len desktop</p></div>
   <div class="show-small"><p>Len mobil</p></div>
   @end */
.lp .hide-small { display: block; }
.lp .show-small { display: none; }
@media (max-width: 770px) {
    .lp .hide-small { display: none; }
    .lp .show-small { display: block; }
    .lp span.show-small,
    .lp a.show-small { display: inline; }
}


/* @block lp-legacy-icons
   @title Písmo Material Icons (icons-ready)
   @category Prechod
   @deprecated 2026-10-01 Nové články majú ikony lp-icon zo štýlu css.icons.
   @desc Ikony písma Material Icons (trieda material-icons) v obale .lp sú neviditeľné,
   kým sa písmo nenačíta, aby sa nezobrazili slová ako cast_connected. Triedu
   icons-ready na html pridáva iniIconsReady v ikelp.js témy (§6.2). Poistka: ak
   ikelp.js chýba alebo spadne, animácia ikony ukáže po 2 s aj bez triedy.
   Platí aj pre ikony z modulov vložených do článku (kontakt, edície).
   @end */
.lp .material-icons {
    opacity: 0;
    transition: opacity 0.15s ease;
    animation: lp-icons-show 0s linear 2s forwards;
}
html.icons-ready .lp .material-icons { opacity: 1; }
@keyframes lp-icons-show {
    to { opacity: 1; }
}