/* ==========================================================================
   kontajnernaodpad.sk - projektové CSS (načítava sa po kitovom assets/css/style.css)
   --------------------------------------------------------------------------
   Kit: Constro (zzz_dizajn/themeforest-bp2jWNQe-constro-construction-html5-template/constro).
   Vendor súbory v assets/css/ sa NEMENIA - všetky úpravy patria sem.
   Rozhodnutie klienta: farby a písmo 1:1 ako p-k.sk, odlíšenie iba výberom a poradím modulov.
   Dizajnový systém a návod pre podstránky: podklady/analyza/06-dizajn-system.md

   Pravidlá jednej stránky sú na konci súboru v sekciách „Stránka: <alias>“ - každé pravidlo má prefix
   body.page-<content_file> (body.php dáva triedu na <body>), takže platí iba na danej stránke. Počas
   stavby boli v assets/css/pages/<content_file>.css, pri integrácii sa zlúčili sem (rovnaké poradie
   kaskády: za všetkými spoločnými sekciami). Nové pravidlo stránky patrí do jej sekcie, spoločné pravidlo
   do číslovanej sekcie pred nimi.

   Obsah:
   01 Tokeny (p-k.sk 1:1)
   02 Slovenská typografia (text-transform) + vedomé výnimky
   03 Úpravy, ktoré p-k.sk spravilo priamo vo vendor style.css (zopakované ako prekrytia)
   04 Typografia: nadpisy kariet h3 namiesto h4/h5/h6, m³, zvýraznenie
   05 Prístupnosť: fokus, odkaz „Preskočiť na obsah“
   06 Tlačidlá
   07 Hlavička webu: header-top, navigácia, nav-right, mobilné menu
   08 Hlavička podstránky .site-breadcrumb (modul mod_page_header)
   09 Ikony Font Awesome v kitových ikonových kruhoch
   10 Spoločné sekčné vzory: úvodný odsek, počítadlá, veľkosti (pricing)
   11 CTA pás .cta-area (modul mod_cta)
   12 Objednávkový formulár: quote-area + mod_objednavka, stavy formulárov
   13 Pätička
   14 Chybová stránka 404 (error-area)
   15 Záložné bloky (výpadok dát p-k)
   16 Vyvážené zalomenie nadpisov a krátkych textov (text-wrap: balance)
   17 Kontaktné karty .contact-info (kontakt, online-objednavka)
   18 Karty .service-area2 v statickej mriežke (o-firme, co-patri-do-kontajnera)
   19 Záložné písmo s rozmermi Poppins a Roboto (bez posunu obsahu po načítaní Google Fonts)
   Stránky (prefix body.page-<alias>): home · o-firme · cennik · velkosti-kontajnerov · online-objednavka ·
   co-patri-do-kontajnera · faq · kontakt
   ========================================================================== */


/* --------------------------------------------------------------------------
   01 Tokeny - hodnoty z p-k/assets/css/style.css (:root). Ostatné tokeny kitu
   (--body-text-color #757F95, --color-dark #002C5B, --theme-bg-light #F6F6F6...)
   ostávajú, rovnako ako na p-k.sk. Písmo Poppins + Roboto importuje kitový style.css.
   -------------------------------------------------------------------------- */
:root {
    --theme-color: #fcb400;          /* p-k.sk: jantárová žltá - tlačidlá, štítky, ikony */
    --theme-color2: #08507A;         /* p-k.sk: petrolejová - tmavé plochy, theme-btn2 */
    --footer-bg: #08507A;            /* p-k.sk */

    /* projektové pomocné tokeny (nie sú to nové farby značky) */
    --kn-focus: #08507A;                             /* obrys fokusu na svetlom pozadí */
    --kn-focus-ring: 0 0 0 .25rem rgba(252, 180, 0, .35); /* kit má natvrdo oranžový rgba(246, 88, 1, .25) */
    --kn-chyba: #B22222;                             /* chybné pole formulára (konvencia wbc-form) */
}


/* --------------------------------------------------------------------------
   02 Slovenská typografia
   Kit dáva text-transform: capitalize/uppercase na desiatky tried. V slovenčine píšeme
   vetným písmom („Naše služby“, nie „Naše Služby“). p-k.sk capitalize vymazalo priamo vo
   vendor CSS; tu to platí plošne. Vedomé výnimky: žiadne (aj kicker hera je vo vetnom tvare).
   -------------------------------------------------------------------------- */
body,
body * {
    text-transform: none !important;
}


/* --------------------------------------------------------------------------
   03 Úpravy p-k.sk vo vendor style.css, zopakované ako prekrytia (diff kit vs p-k):
   a:hover theme-color (kit --color-blue), farba textu v poliach formulára, .site-title
   45 -> 27 px, nav-link 17 -> 15 px a odstup 22 -> 15 px (pod 1200 px 15 -> 10 px),
   dropdown 220 -> 320 px.
   -------------------------------------------------------------------------- */
a:hover {
    color: var(--theme-color);
}

.form-group .form-control,
.form-group .form-select {
    color: var(--body-text-color);
}

.site-title {
    font-size: 27px;
}

@media all and (min-width: 992px) {
    .navbar .nav-item .nav-link {
        margin-right: 15px;
        font-size: 15px;
    }

    .navbar .nav-item .dropdown-menu {
        width: 320px;
    }
}

@media all and (max-width: 1199px) {
    .navbar .nav-item .nav-link {
        margin-right: 10px;
    }
}


/* --------------------------------------------------------------------------
   04 Typografia
   Hierarchia: kit má v kartách h4/h5/h6, kicker hera h6, CTA h1, nadpis formulára h3.
   V projekte: kicker = <p>/<span>, karty = h3, CTA a formulár = h2, čísla nie sú nadpisy.
   Vzhľad h3 v kartách = pôvodný kitový h4/h6 (veľkosť a farba prenesené sem).
   -------------------------------------------------------------------------- */
.process-item .content h3,
.choose-item-info h3,
.service-content h3,
.feature-content h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.process-item .content h3,
.choose-item-info h3 {
    color: var(--color-dark);
}

.choose-item-info h3 {
    margin-bottom: 8px;
}

.feature-content h3 {
    color: var(--color-white);
}

.service-content h3 a {
    color: var(--color-dark);
}

.service-content h3 a:hover {
    color: var(--theme-color);
}

.about-item .content h3 {
    color: var(--color-dark);
    font-size: 18px;
    margin-bottom: 5px;
}

.contact-info .content h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-dark);
}

/* m³ v nadpisoch a číslach: horný index nesmie roztiahnuť riadok */
.site-title sup,
.pricing-amount sup,
.hero-title sup,
.breadcrumb-title sup {
    font-size: .55em;
    top: -.75em;
}

/* úvodný odsek pod nadpisom sekcie (site-heading) - kit ho má s margin-top 15px */
.site-heading .kn-perex {
    font-size: 17px;
}


/* --------------------------------------------------------------------------
   05 Prístupnosť
   Kit má outline: none na odkazoch a oranžový focus ring formulárov natvrdo (style.css 614,
   655, 700) - viditeľný fokus iba pri klávesnici (:focus-visible), krúžok v žltej p-k.sk.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.nice-select:focus-visible {
    outline: 3px solid var(--kn-focus);
    outline-offset: 2px;
}

.header-top a:focus-visible,
.hero-section a:focus-visible,
.site-breadcrumb a:focus-visible,
.footer-area a:focus-visible,
.quote-area.kn-quote a:focus-visible {
    outline-color: var(--theme-color);
}

.form-group .form-control:focus,
.form-group .form-select:focus,
.form-check .form-check-input:focus,
.nice-select:focus {
    box-shadow: var(--kn-focus-ring);
}

/* „Preskočiť na obsah“ (Bootstrap .visually-hidden-focusable) - viditeľný štítok pri fokuse */
.visually-hidden-focusable:focus {
    position: fixed !important;
    top: 10px;
    left: 10px;
    z-index: 1100;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--color-white);
    color: var(--color-dark);
    font-weight: 600;
    box-shadow: var(--box-shadow2);
}


/* --------------------------------------------------------------------------
   06 Tlačidlá - kitové .theme-btn (žltá s bielym textom ako p-k.sk) a .theme-btn2
   (petrolejová). Modifikátor .kn-btn-white: biele tlačidlo na žltom CTA páse, kde by
   .theme-btn splynulo s pozadím.
   -------------------------------------------------------------------------- */
.theme-btn.kn-btn-white {
    background: var(--color-white);
    color: var(--color-dark);
}

.theme-btn.kn-btn-white::before {
    background: var(--theme-color2);
}

.theme-btn.kn-btn-white:hover {
    color: var(--color-white);
}

/* odkaz s telefónom pod tlačidlami (hero, CTA, formulár) */
.kn-tel {
    font-weight: 700;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   07 Hlavička webu (body.php) - kitový header-top (variant index.html ako p-k.sk)
   + navigácia; v nav-right telefón (kitový .call-wrap) a tlačidlo „Objednať kontajner“.
   Kontajner kitu má od 1200 px vždy 1200 px - menu, telefón aj tlačidlo sa zmestia.
   -------------------------------------------------------------------------- */
/* lichobežníky horného pásu pri 1200-1399 px: kitový pravý (::after, 8 % šírky) by prekryl adresu,
   ľavý (::before, od 80 px) by začínal až za e-mailom - zúžiť na voľný okraj vedľa kontajnera */
@media all and (min-width: 1200px) {
    .header-top::after {
        width: min(8%, calc((100% - 1200px) / 2));
    }
}

@media all and (min-width: 1200px) and (max-width: 1399px) {
    .header-top::before {
        left: 0;
    }
}

.header-top-list span {
    color: var(--color-white);
}

.header-top-list span i {
    color: var(--color-white);
    margin-right: 5px;
}

.header-top-list a:hover {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.navbar-brand img {
    width: 160px;
}

@media all and (min-width: 992px) {
    .navbar .nav-item .nav-link {
        padding: 32px 0;
        white-space: nowrap;
    }

    .nav-right {
        margin-left: 30px;
        gap: 22px;
    }

    .nav-right .call-wrap .icon {
        margin-top: 0;
    }

    .nav-right .call-wrap .content span {
        display: block;
        color: var(--body-text-color);
        font-size: 13px;
        line-height: 1.3;
    }

    .nav-right .call-wrap .kn-call-num {
        margin: 0;
        line-height: 1.2;
    }

    .nav-right .call-wrap .kn-call-num a {
        color: var(--color-dark);
        font-family: var(--heading-font);
        font-weight: 700;
        font-size: 17px;
        white-space: nowrap;
    }

    .nav-right .call-wrap .kn-call-num a:hover {
        color: var(--theme-color2);
    }

    .nav-right .theme-btn {
        white-space: nowrap;
    }
}

/* 992-1199 px: kontajner 960 px - užšie logo a menu, telefón skrytý (kit), tlačidlo ostáva */
@media all and (min-width: 992px) and (max-width: 1199px) {
    .navbar-brand img {
        width: 140px;
    }

    .navbar .nav-item .nav-link {
        font-size: 14px;
    }

    .nav-right {
        margin-left: 12px;
    }

    .nav-right .theme-btn {
        padding: 10px 14px;
        font-size: 15px;
    }
}

/* mobil: v paneli menu (offcanvas) sa ukáže aj telefón a tlačidlo objednávky */
@media all and (max-width: 991px) {
    .navbar-brand img {
        width: 130px;
    }

    .navbar .offcanvas .nav-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin: 24px 0 0;
        padding-top: 22px;
        border-top: 1px solid var(--border-info-color);
    }

    .navbar .offcanvas .nav-right .call-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .navbar .offcanvas .nav-right .call-wrap .icon {
        width: 45px;
        height: 45px;
        line-height: 45px;
        border-radius: 50px;
        background: var(--theme-color);
        color: var(--color-white);
        text-align: center;
        font-size: 18px;
    }

    .navbar .offcanvas .nav-right .call-wrap .content span {
        display: block;
        font-size: 13px;
        line-height: 1.3;
    }

    .navbar .offcanvas .nav-right .kn-call-num {
        margin: 0;
    }

    .navbar .offcanvas .nav-right .kn-call-num a {
        font-weight: 700;
        font-size: 18px;
        color: var(--color-dark);
    }

    /* aktuálna stránka v mobilnom menu: petrolejová (ostatné tmavomodré - rozdiel iba 1,6:1) + žltý pásik vľavo */
    .navbar .nav-item .nav-link.active {
        color: var(--theme-color2);
        padding-left: 12px;
        box-shadow: inset 3px 0 0 var(--theme-color);
    }

    .navbar .offcanvas-header .btn-close {
        position: relative;
        line-height: 18px;
    }

    /* Dotykové ciele hlavičky aspoň 44 x 44 px (kit: menu 22 x 19, telefón 20 x 36, zatvorenie menu 36 x 36).
       Ikony ostávajú na mieste: väčšia plocha ide do paddingu (medzeru medzi ikonami nahradí), záporný pravý okraj
       vráti hamburger k okraju kontajnera; zatvárací krížik zväčší neviditeľná plocha ::after. Výška navigácie
       sa nemení (88 px určuje logo, --kn-navbar-h). */
    .navbar .mobile-menu-right {
        gap: 0;
    }

    .navbar .mobile-menu-right .nav-right-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .navbar-toggler {
        padding: 13px 11px 12px;
        margin-right: -11px;
    }

    .navbar .offcanvas-header .btn-close::after {
        content: "";
        position: absolute;
        inset: -4px;
    }
}

/* Fixná navigácia bez skoku obsahu. main.js (kit, nemeniť) pri scrollTop > 50 pridá .navbar.fixed-top
   (position: fixed) - obal .main-navigation by sa zrútil na 0 a celý obsah by poskočil hore o výšku navigácie.
   Navigácia má preto pevnú minimálnu výšku a obal drží presne rovnaké miesto v oboch stavoch. Výšky sú
   namerané (prirodzená výška 87,9 / 89,2 / 91 px, zaokrúhlené nahor na celé px; fixný stav má rovnakú výšku):
   pod 992 px určuje výšku logo 130 px, pri 992-1199 px menu 14 px, od 1200 px menu 15 px. Pri zmene loga
   alebo menu premerať: python3 -I podklady/kontrola/integracia/navbar-vysky.py. Rovnaká premenná určuje
   odsadenie cieľov kotiev pod fixnou navigáciou (sekcia 10). */
:root {
    --kn-navbar-h: 88px;
}

@media all and (min-width: 992px) {
    :root {
        --kn-navbar-h: 90px;
    }
}

@media all and (min-width: 1200px) {
    :root {
        --kn-navbar-h: 91px;
    }
}

.main-navigation,
.main-navigation .navbar {
    min-height: var(--kn-navbar-h);
}

/* horný pás na mobile: iba e-mail a dispečing (hodiny a adresa sú v pätičke a na /kontakt) */
@media all and (max-width: 767px) {
    .header-top {
        padding: 8px 0;
    }

    .header-top-wrap {
        justify-content: center;
    }

    .header-top-right {
        display: none;
    }

    .header-top-list ul {
        gap: 18px;
        justify-content: center;
    }

    .header-top-list a {
        font-size: 14px;
    }
}


/* --------------------------------------------------------------------------
   08 Hlavička podstránky - kitový .site-breadcrumb ako p-k.sk (centrovaný H1 + drobčeky),
   modul WEBSTATIC/modules/sk/mod_page_header.php. Pozadie: predvolená fotka s kontajnermi
   (1920x560 = výška bloku, bez parallaxu) pod kitovým prekrytím theme-color2 80 %.
   Iná fotka pre podstránku: body.page-<alias> .site-breadcrumb { background-image: url(../img/obsah/...); }
   v sekcii „Stránka: <alias>“ na konci tohto súboru.
   -------------------------------------------------------------------------- */
.site-breadcrumb {
    background-image: url(../img/obsah/hlavicka-predvolena.jpg);
    padding-top: 110px;
    padding-bottom: 110px;
}

.site-breadcrumb .breadcrumb-title {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.25;
}

.site-breadcrumb .breadcrumb-menu {
    margin: 0;
    padding: 0;
}

@media all and (max-width: 767px) {
    .site-breadcrumb {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .site-breadcrumb .breadcrumb-title {
        font-size: 28px;
    }
}

/* telefón: nižšia hlavička - pod ňou je perex s hlavným tlačidlom, nech je bližšie k prvej obrazovke */
@media all and (max-width: 575px) {
    .site-breadcrumb {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}


/* --------------------------------------------------------------------------
   09 Ikony Font Awesome v kitových ikonových kruhoch (kit tam čaká <img> svg s filtrom)
   -------------------------------------------------------------------------- */
.choose-item-icon i {
    color: var(--color-white);
    font-size: 25px;
    line-height: 60px;
}

.process-item .icon {
    line-height: 80px;
}

.process-item .icon i {
    color: var(--color-white);
    font-size: 32px;
    line-height: inherit;
}

.pricing-icon i {
    color: var(--color-white);
    font-size: 34px;
}

.counter-item .icon {
    line-height: 80px;
}

.counter-item .icon i {
    font-size: 32px;
    line-height: inherit;
    color: var(--theme-color);
}

.about-item .icon i {
    color: var(--color-white);
    font-size: 26px;
    line-height: 65px;
}

.feature-icon i,
.service-icon i {
    color: var(--color-white);
    font-size: 34px;
}

.feature-icon i {
    line-height: 80px;
}


/* --------------------------------------------------------------------------
   10 Spoločné sekčné vzory
   -------------------------------------------------------------------------- */

/* Odsadenie sekcií na telefóne a malom tablete (do 767 px): kit má py-100 / pt-80 na všetkých šírkach - medzi
   posledným prvkom jednej sekcie a prvým ďalšej ostávalo 200-350 px prázdna (Veľkosti 4x 252 px, stránky 5 700 až
   13 100 px dlhé pri 500 px; kontrola 8. 11. 2026, M-13). Kotvy to neovplyvní (scroll-margin, sekcia 07).
   Presnejšie pravidlá (perex podstránok, prvá sekcia FAQ, Online objednávka, tlač Čo patrí) majú vyššiu
   špecificitu a platia ďalej. */
@media all and (max-width: 767.98px) {
    .py-100 {
        padding: 64px 0;
    }

    .pt-100 {
        padding-top: 64px;
    }

    .pb-100 {
        padding-bottom: 64px;
    }

    .pt-80 {
        padding-top: 48px;
    }

    .pb-80 {
        padding-bottom: 48px;
    }
}

/* Kotvy v obsahu: navigácia je po zrolovaní fixná (main.js .fixed-top, výška --kn-navbar-h zo sekcie 07).
   Cieľ kotvy skončí 16 px pod jej spodným okrajom - pri príchode z inej stránky aj pri kliknutí na stránke
   (obal navigácie drží miesto, takže sa po zrolovaní nič neposunie). Jediné pravidlo pre celý web. */
.main [id] {
    scroll-margin-top: calc(var(--kn-navbar-h) + 16px);
}

/* Cieľ kotvy (alebo blok, ktorý ho obsahuje) bez vstupnej animácie WOW. Pri príchode z inej stránky prehliadač
   po dočítaní písiem posunie stránku na kotvu znova - ak vtedy karta práve „vchádza“ (fadeInUp, posun o 20 px),
   cieľ skončí až 20 px vyššie, pod navigáciou (pomalšia sieť: 5 zo 6 príchodov na cennik#kontajner-7-m3,
   s týmto pravidlom 8 z 8 presne 16 px pod navigáciou). Karta sa ukáže hneď, bez animácie. */
.wow:target,
.wow:has(:target) {
    animation-name: none !important;
    visibility: visible !important;
}

/* Karty v statickej mriežke rovnako vysoké (v kite sú v karuseli alebo s rovnako dlhými textami) */
.process-item,
.feature-item,
.counter-area2 .counter-item {
    height: 100%;
}

.counter-area2 .counter-item {
    align-items: center;
}

/* Úvodný odsek bez nadpisu (answer-first) - vlastný typografický blok .kn-lead */
.kn-lead {
    font-size: 19px;
    line-height: 1.75;
    color: var(--color-dark);
}

@media all and (max-width: 767px) {
    .kn-lead {
        font-size: 17px;
    }
}

/* Dlhé úvodné odseky (5 a viac riadkov) zarovnané vľavo - centrovaný text na toľko riadkov sa číta ťažko
   (kontrola 8. 11. 2026, D-12). Na stred ostávajú krátke perexy .kn-lead podstránok, CTA a telefón.
   Úvod: odsek pod počítadlami; Veľkosti a Čo patrí: odsek klienta pod perexom (farba textu tela, sekcie stránok). */
.kn-uvod-odsek .kn-lead,
.kn-perex-sekcia .kn-velkosti-uvod,
.kn-perex-sekcia .kn-perex-odsek {
    text-align: left;
    text-wrap: pretty;
}

/* Prvá sekcia podstránky pod hlavičkou: perex (.kn-lead) + CTA + telefón (vzor v 06-dizajn-system.md).
   Klient: podnadpis a CTA nepatria do .site-breadcrumb, ale do prvej sekcie pod ňou. */
.kn-perex-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 26px;
    margin-top: 28px;
}

/* telefón: menšie odsadenie perexu (kit pt-80/pb-80 nemá mobilný variant) - hlavné tlačidlo vyššie */
@media all and (max-width: 575px) {
    .kn-perex-sekcia.pt-80 {
        padding-top: 44px;
    }

    .kn-perex-sekcia.pb-80 {
        padding-bottom: 56px;
    }
}

.kn-perex-tel {
    margin: 0;
    color: var(--color-dark);
}

.kn-perex-tel a {
    color: var(--color-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kn-perex-tel a:hover {
    color: var(--theme-color2);
}

/* counter-area2 mimo hera (napr. O firme): bez kitového prekrytia -80 px */
.counter-area2.kn-counter-flat .counter-wrap {
    margin-top: 0;
}

/* Počítadlá counter-area2 (biele karty): číslo nie je nadpis (span.counter / span.counter-static),
   popis je <p class="title">. Text v .unit v petrolejovej - žltá na bielej je nečitateľná. */
.counter-item .title {
    margin-bottom: 0;
    line-height: 1.35;
}

.counter-area2 .counter-item .unit {
    color: var(--theme-color2);
    font-weight: 600;
}

.counter-area2 .counter-item .title {
    font-size: 16px;
    font-weight: 600;
}

/* Ikona sa v úzkej karte nesmie stlačiť (kit nemá flex-shrink: 0 - pri 992-1199 px bola ikona karty ISO na úvode
   stlačená na 32 x 80 px), obsah zaberie zvyšok šírky a smie sa zúžiť. Veta „čo to pre vás znamená“ pod popisom
   (.kn-counter-note, O firme). Počas stavby iba na O firme - zjednotené.
   POZOR na poradie: toto základné pravidlo musí byť PRED mobilným blokom nižšie (rovnaká špecificita - neskoršie
   pravidlo vyhráva). Za ním prebilo mobilných 52 px: ikony boli ovály 80 x 52 a karta ISO pri 320-414 px
   roztiahla úvod do strany (kontrola 8. 11. 2026). */
.counter-area2 .counter-item .icon {
    flex: 0 0 80px;
}

.counter-area2 .counter-item .content {
    flex: 1;
    min-width: 0;
}

/* číslo a jednotka („ISO“ + „45001“, „600“ + „+“): keď sa vedľa seba nezmestia, jednotka prejde pod číslo
   (karta ISO pri 576-767 px a na úzkych telefónoch) - nevytŕča z karty ani zo stránky */
.counter-area2 .counter-item .info {
    flex-wrap: wrap;
}

.counter-item .kn-counter-note {
    margin-top: 6px;
    color: var(--body-text-color);
    font-size: 15px;
    line-height: 1.55;
}

/* mobil: 2 x 2 karty (col-6) namiesto 4 vysokých pod sebou - menšia ikona a číslo */
@media all and (max-width: 575px) {
    .counter-area2 .counter-item {
        gap: 8px;
        padding: 10px 8px 10px 10px;
    }

    .counter-area2 .counter-item .icon {
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
        line-height: 52px;
    }

    .counter-area2 .counter-item .icon i {
        font-size: 22px;
    }

    .counter-area2 .counter-item .counter,
    .counter-area2 .counter-item .counter-static {
        font-size: 30px;
    }

    .counter-area2 .counter-item .unit {
        font-size: 15px;
    }

    .counter-area2 .counter-item .title {
        font-size: 13px;
        margin-top: 6px;
    }
}

/* 480-575 px: v karte je dosť miesta na 14 px bez ďalšieho riadka (pod 480 px by sa popis zalomil na 3 riadky,
   pod 375 px by „certifikovaná“ pretieklo) - kontrola 8. 11. 2026, M-14 */
@media all and (min-width: 480px) and (max-width: 575.98px) {
    .counter-area2 .counter-item .title {
        font-size: 14px;
    }
}

/* úzke telefóny, karty 2 x 2 (úvod; O firme .kn-counter-flat má karty na celú šírku): v karte ostáva na text
   74 px (360 px) - „certifikovaná“ by pri 13 px pretiekla */
@media all and (max-width: 399.98px) {
    .counter-area2:not(.kn-counter-flat) .counter-item .title {
        font-size: 12px;
    }
}

/* pod 360 px (320 px = WCAG reflow, staršie a zväčšené displeje) by text vedľa ikony nemal miesto - ikona je
   dekoratívna (aria-hidden), karta ukáže iba číslo a popis */
@media all and (max-width: 359.98px) {
    .counter-area2:not(.kn-counter-flat) .counter-item .icon {
        display: none;
    }

    .counter-area2:not(.kn-counter-flat) .counter-item {
        padding-left: 16px;
    }
}

/* statická hodnota (napr. „ISO“) - counter-up.js ju nedostane (trieda .counter by dala NaN) */
.counter-item .counter-static {
    display: block;
    line-height: 1;
    font-size: 46px;
    font-weight: 900;
    color: var(--color-dark);
}

/* Veľkosti kontajnerov v kitovom .pricing-item: štítok je <p>; bez sumy (ceny sú iba v cenníku, rozhodnutie 9. 11. 2026) */
.pricing-header .kn-pricing-label {
    display: inline-block;
    margin: 0;
    color: var(--color-white);
    font-family: var(--heading-font);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.7;
}

.pricing-amount-type {
    font-size: 22px;
    font-weight: 700;
}

/* Riadok s veľkou medzerou (row g-lg-5: okraje -24 px) je o 12 px na každú stranu širší než obsah kontajnera
   (od 1200 px má kontajner 1200 px a padding 12 px). Pri okne 1200-1247 px kontajner nemá okolo seba voľný okraj
   a riadok by stránku roztiahol do strany (úvod - veľkosti, Čo patrí - prehľad). V tomto rozsahu medzera ako g-4. */
@media all and (min-width: 1200px) and (max-width: 1247.98px) {
    .row.g-lg-5 {
        --bs-gutter-x: 1.5rem;
    }
}


/* --------------------------------------------------------------------------
   11 CTA pás - kitový .cta-area/.cta-wrap (modul mod_cta). Kit: h1 a biely text na theme-color;
   v projekte h2 a tmavý text, lebo biela na žltej #fcb400 má kontrast iba 1,8:1.
   Textúra pásu pri 10 % (kit: 3D vizualizácia budovy shape/01.png) je od 9. 11. 2026 vlastná fotka vozového parku
   P + K, čiernobielo, ŠPZ zakryté (podklady/kontrola/obrazky-etapa-b.py textura; Peter: nie fotka z kitu).
   -------------------------------------------------------------------------- */
.cta-wrap::before {
    background-image: url(../img/obsah/cta-pas-vozovy-park.webp);
}

.cta-content h2 {
    color: var(--color-dark);
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 12px;
}

.cta-content p {
    color: var(--color-dark);
    font-size: 17px;
}

.cta-content .kn-cta-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.cta-content .theme-btn.kn-btn-white {
    background: var(--color-white);
    color: var(--color-dark);
}

.cta-content .theme-btn.kn-btn-white:hover {
    color: var(--color-white);
}

.cta-content .kn-cta-tel {
    margin: 22px 0 0;
    font-size: 16px;
}

.cta-content .kn-cta-tel a {
    color: var(--color-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cta-content .kn-cta-tel a:hover {
    color: var(--theme-color2);
}

.cta-area a:focus-visible {
    outline-color: var(--color-dark);
}

@media all and (max-width: 767px) {
    .cta-content h2 {
        font-size: 25px;
    }
}


/* --------------------------------------------------------------------------
   12 Objednávkový formulár - kitová .quote-area (úvod aj /online-objednavka) a modul
   mod_objednavka (.quote-form.kn-objednavka). Modifikátor .kn-quote: kitová sekcia s fotkou,
   biela karta s formulárom vpravo, nadpis h2 (kit h3).
   Stavy: chybné pole = inline orámovanie #B22222 z formular.js (aj na nice-select).
   -------------------------------------------------------------------------- */
.quote-area.kn-quote {
    background-color: var(--theme-color2);
}

.quote-area.kn-quote .quote-content {
    padding: 45px 40px 40px;
}

.quote-head h2,
.contact-form-header h2 {
    font-size: 27px;       /* ako nadpisy sekcií; kit: quote h3, kontaktný formulár h2 30 px */
    margin-bottom: 8px;
}

.quote-head .kn-quote-tel {
    margin-top: 6px;
}

.quote-head .kn-quote-tel a {
    color: var(--color-dark);
}

.quote-head .kn-quote-tel a:hover {
    color: var(--theme-color2);
}

/* kroky formulára (1 kontajner a termín, 2 miesto, 3 kontakt) - p.kn-form-krok, nie nadpis */
.kn-form-krok {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;
    color: var(--color-dark);
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 600;
}

.kn-form-krok span {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50px;
    background: var(--theme-color2);
    color: var(--color-white);
    text-align: center;
    font-size: 14px;
}

/* vybraná hodnota v nice-select (dlhý druh odpadu) nesmie vojsť pod šípku */
.kn-objednavka .nice-select .current {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* polia: dátum (type=date) má rovnakú výšku ako ostatné, textarea bez zmeny výšky do strán */
.kn-objednavka .form-control[type="date"] {
    min-height: 54px;
}

/* Viditeľný štítok poľa (dátum pristavenia): <input type="date"> nemá placeholder - Chrome ukáže iba
   „dd.mm.yyyy“, iOS prázdne pole. Štítok sedí na hornom okraji poľa ako legenda (biele pozadie preruší
   rámik), výšku poľa ani zarovnanie s vedľajším poľom nemení; ostáva viditeľný aj po výbere dátumu.
   Písmo a farba ako nadpisy krokov (.kn-form-krok). */
.kn-objednavka .form-icon .kn-form-label {
    position: absolute;
    top: -10px;
    left: 14px;
    z-index: 2;
    margin: 0;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-dark);
    font-family: var(--heading-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

.kn-objednavka textarea.form-control,
.kn-kontakt-form textarea.form-control {
    resize: vertical;
}

/* nice-select: dlhý zoznam sa roluje, nevytŕča zo stránky. Od 992 px celý zoznam bez rolovania (objem 8 položiek,
   druh odpadu 10 po 40 px) - macOS posuvník neukáže a 26 a 30 m³ by pod okrajom zoznamu nikto nehľadal. */
.kn-objednavka .nice-select .list,
.kn-kontakt-form .nice-select .list {
    max-height: 280px;
    overflow-y: auto;
}

@media all and (min-width: 992px) {
    .kn-objednavka .nice-select .list,
    .kn-kontakt-form .nice-select .list {
        max-height: 420px;
    }
}

/* formular.js označí chybný select aj na nice-select (inline border) - nech je hrúbka ako pri poli */
.kn-objednavka .nice-select,
.kn-objednavka .form-control,
.kn-kontakt-form .form-control {
    border-width: 1px;
}

.kn-form-consent {
    margin: 4px 0 22px;
}

.kn-form-consent .form-check-label {
    font-size: 15px;
    line-height: 1.6;
}

/* kitový checkbox má okraj rgba(0,0,0,.08) - takmer neviditeľný; súhlas je povinný, musí byť vidno */
.kn-form-consent .form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 4px;
    border: 1px solid #A3ABB8;
}

.kn-form-consent .form-check-label {
    padding-left: 4px;
}

.kn-form-error .alert {
    margin-bottom: 18px;
    border-radius: 15px;
    font-size: 15px;
    line-height: 1.6;
}

.kn-form-error .alert a,
.kn-form-status .alert a {
    font-weight: 700;
    white-space: nowrap;
}

.kn-form-status .alert {
    margin: 0;
    border-radius: 15px;
    font-size: 16px;
    line-height: 1.6;
}

/* hlášky formulárov bez osamoteného slova na konci vety (pri 375-500 px ostávalo „údajov.“, „orámovaním.“ samé;
   „hviezdičkou *.“ drží nezalomiteľná medzera vo formular.js - kontrola 8. 11. 2026, M-16) */
.kn-form-error .alert,
.kn-form-status .alert {
    text-wrap: pretty;
}

.kn-form-loader {
    margin-left: 12px;
    vertical-align: middle;
}

.kn-form-note {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--body-text-color);
}

.kn-form-note i {
    color: var(--theme-color2);
    margin-right: 6px;
}

@media all and (max-width: 991px) {
    .quote-area.kn-quote {
        padding: 50px 0;
    }

    .quote-area.kn-quote .quote-content {
        border-radius: 30px;
        padding: 35px 25px;
    }
}


/* --------------------------------------------------------------------------
   13 Pätička - kitová .footer-area ako p-k.sk (petrolejová, fotka v .footer-shape pri 10 %)
   -------------------------------------------------------------------------- */
.footer-shape.kn-footer-shape {
    background-image: url(../img/obsah/hlavicka-predvolena.jpg);
}

.footer-logo img {
    width: 170px;
}

.footer-widget-box p {
    color: var(--footer-text-color);
}

.footer-list li a {
    color: var(--footer-text-color);
    display: inline-flex;
    align-items: baseline;
}

.footer-contact .content .h6 {
    color: var(--color-white);
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 3px;
    padding: 0;
    line-height: 1.4;
}

.footer-contact .content p {
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.footer-contact .icon {
    color: var(--color-white);
    flex: 0 0 35px;
}

.footer-contact .content a:hover {
    color: var(--theme-color);
}

/* preklik na odvozodpadu.eu (ponuka, časť 3) */
.kn-footer-odkaz {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 20px;
    color: var(--footer-text-color);
}

.kn-footer-odkaz .icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50px;
    background: var(--theme-color);
    color: var(--color-white);
    font-size: 18px;
}

.footer-widget-box .kn-footer-odkaz p {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.kn-footer-odkaz a {
    color: var(--theme-color);
    font-weight: 600;
}

.kn-footer-odkaz a:hover {
    color: var(--color-white);
}

.copyright .copyright-text a img {
    vertical-align: -5px;
}

.copyright .kn-copyright-wc {
    text-align: right;
}

@media all and (max-width: 767px) {
    .copyright .kn-copyright-wc {
        text-align: left;
        margin-top: 8px;
    }

    .footer-widget-box.about-us {
        margin-right: 0;
    }
}

/* Úzke telefóny (pod 400 px): dva stĺpce odkazov po ~160 px zalomili 6 z 8 služieb na dva riadky a pod kratším
   stĺpcom ostávalo prázdno - stĺpce odkazov pod sebou na celú šírku (kontrola 8. 11. 2026, M-17). */
@media all and (max-width: 399.98px) {
    .footer-widget-wrap .row > .col-6 {
        width: 100%;
    }
}

/* tlačidlo „Hore“ - kitové #scroll-top (pri <base href> vedie odkaz na #obsah aktuálnej stránky) */
#scroll-top:hover {
    color: var(--color-white);
}

/* Pod 1200 px (dotykové zariadenia) menšie a v rohu: kit má 50 px (otočený štvorec zaberie 70 px), 30 px od okraja
   a pri 768-1199 px 100 px nad spodkom - zakrývalo polia formulára, ceny v cenníku a odkazy pätičky. */
@media all and (max-width: 1199px) {
    #scroll-top {
        right: 12px;
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 18px;
    }

    #scroll-top.active {
        bottom: 12px;
    }
}

/* bez myši by šípka ostala natrvalo otočená o -40° (vyrovná ju iba :hover) */
@media (hover: none) {
    #scroll-top {
        transform: none;
    }
}

/* pri vypĺňaní formulára (fokus v poli) tlačidlo nepotrebno - na mobile by zakrývalo pole pri klávesnici */
body:has(form :focus) #scroll-top {
    opacity: 0;
    visibility: hidden;
}


/* --------------------------------------------------------------------------
   14 Chybová stránka 404 - kitová .error-area, nadpis h2. Veľké „404“ ako kitové .error-wrap h1 (style.css: 250 px,
   žltá, stredná číslica tmavá) - h1 stránky je v hlavičke, preto odsek .kn-error-cislo s aria-hidden. Nahradil
   kreslenú ilustráciu kitu (tyrkysová/fialová mimo farieb p-k.sk; kontrola 8. 11. 2026, D-15).
   -------------------------------------------------------------------------- */
.error-wrap .kn-error-cislo {
    margin: 0;
    font-family: var(--heading-font);
    font-size: 250px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 5px;
    color: var(--theme-color);
}

.error-wrap .kn-error-cislo span {
    color: var(--color-dark);
}

@media all and (max-width: 767px) {
    .error-wrap .kn-error-cislo {
        font-size: 160px;
    }
}

@media all and (max-width: 575px) {
    .error-wrap .kn-error-cislo {
        font-size: 120px;
    }
}

.error-wrap h2 {
    font-size: 30px;
}

.error-wrap .kn-error-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
}

.error-wrap .kn-error-btns .theme-btn,
.error-wrap .kn-error-btns .theme-btn2 {
    margin-top: 0;
}

.error-wrap .kn-error-odkazy {
    margin-top: 26px;
}

.error-wrap .kn-error-odkazy a {
    display: inline;               /* kit: inline-block - „?“ za „cenník“ by mohol ostať sám na začiatku riadka */
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.error-wrap .kn-error-odkazy a:hover {
    color: var(--theme-color2);
}


/* --------------------------------------------------------------------------
   15 Záložné bloky pri výpadku dát p-k (pk_nahradny_text: p.kn-fallback)
   -------------------------------------------------------------------------- */
.kn-fallback {
    padding: 22px 26px;
    border-radius: 20px;
    background: var(--theme-bg-light);
    border-left: 5px solid var(--theme-color);
    color: var(--color-dark);
}

.kn-fallback a {
    font-weight: 700;
}



/* --------------------------------------------------------------------------
   16 Vyvážené zalomenie nadpisov a krátkych textov (text-wrap: balance) - na celom webe.
   Dlhé slovenské nadpisy a perexy by inak končili osamoteným slovom na poslednom riadku (napr. „nedávať)“,
   „limitom.“). Progresívne vylepšenie: prehliadač bez podpory zalomí bežne; Chrome vyvažuje bloky do 6 riadkov.
   Počas stavby bolo iba na stránkach co-patri-do-kontajnera, faq a velkosti-kontajnerov - zjednotené sem.
   Kontrola 8. 11. 2026 (D-11): aj nadpisy kariet a formulára („…ešte / dnes“, „…alebo / ceste?“, „CENTRÁLA“ z DB).
   -------------------------------------------------------------------------- */
.breadcrumb-title,
.site-heading .site-title,
.site-heading.text-center p,
.kn-lead,
.cta-content h2,
.cta-content p,
.quote-head h2,
.about-item h3,
.service-item h3,
.feature-item h3,
.contact-info h3,
.kn-prevadzka h3,
.footer-widget-title,
.error-wrap h2 + p {
    text-wrap: balance;
}

/* Odseky v nadpisovom bloku zarovnanom vľavo (úvod „Poznáte to?“, O firme „O nás“ a „Náš príbeh“):
   balance by 3-4-riadkový odsek zúžil na 75-86 % stĺpca a vpravo pod nadpisom na celú šírku by ostal prázdny pás
   (kontrola 8. 11. 2026, M-15). Vyváženie iba v centrovaných blokoch; tu iba bez osamoteného slova na konci. */
.site-heading:not(.text-center) p {
    text-wrap: pretty;
}



/* --------------------------------------------------------------------------
   17 Kontaktné karty - kitové .contact-info (contact.html) v statickej mriežke. Stránky: kontakt (4 karty,
   dispečing zvýraznený .kn-kontakt-hlavny v sekcii stránky) a online-objednavka („Radšej telefonicky?“, 3 karty).
   Svetlá karta, ikona v žltom kruhu, h3 (kit h5, sekcia 04). Kit má pod kartami a pod skupinou spodné okraje
   (25 + 50 px) pre ďalší blok - medzery tu robí mriežka (g-4); karty v riadku rovnako vysoké. Hodnota (telefón,
   e-mail, adresa, hodiny) tmavá 17 px, odkaz v nej 18 px tučný; poznámka .kn-kontakt-pozn 15 px, odkaz v nej
   petrolejový podčiarknutý. Počas stavby dvakrát (online-objednavka 06, kontakt 03) - zjednotené podľa /kontakt.
   -------------------------------------------------------------------------- */
.contact-content {
    margin-bottom: 0;
}

.contact-info {
    height: 100%;
    margin-bottom: 0;
    padding: 34px 22px 30px;
    border-radius: 40px;
}

.contact-info .content {
    width: 100%;
}

.contact-info .content p {
    margin-bottom: 0;
    line-height: 1.6;
}

.contact-info .content > p:not(.kn-kontakt-pozn) {
    font-size: 17px;
}

.contact-info .content > p:not(.kn-kontakt-pozn) > a {
    color: var(--color-dark);
    font-weight: 700;
    font-size: 18px;
}

.contact-info .content > p:not(.kn-kontakt-pozn) > a:hover {
    color: var(--theme-color2);
}

/* .content v selektore: kitové .contact-info .content p (0-2-1) by inak prebilo farbu a veľkosť poznámky */
.contact-info .content .kn-kontakt-pozn {
    margin-top: 10px;
    color: var(--body-text-color);
    font-weight: 400;
    font-size: 15px;
}

.contact-info .content .kn-kontakt-pozn a {
    color: var(--theme-color2);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(8, 80, 122, .35);
    text-underline-offset: 3px;
}

.contact-info .content .kn-kontakt-pozn a:hover {
    color: var(--color-dark);
    text-decoration-color: currentColor;
}

/* mobil: karty pod sebou - menší kruh ikony, aby kontakty zabrali menej výšky */
@media all and (max-width: 575px) {
    .contact-info {
        gap: 12px;
        padding: 26px 20px 24px;
        border-radius: 30px;
    }

    .contact-info .icon {
        width: 58px;
        height: 58px;
        font-size: 27px;
        line-height: 58px;
    }
}


/* --------------------------------------------------------------------------
   18 Karty .service-area2 (kitová karta s ikonou v kvapke) v statickej mriežke: rovnaká výška v riadku, bez
   kitového margin-top 20 px (karta by pretiekla stĺpec). Stránky: o-firme („Ako pristupujeme k práci“, číslo
   karty dole ako v kite) a co-patri-do-kontajnera („Druhy odpadu“, päta s tlačidlom, číslo hore vpravo
   a obmedzená textúra - to je v sekcii stránky, lebo O firme tlačidlo ani textúru nemá).
   -------------------------------------------------------------------------- */
.service-area2 .service-item {
    height: 100%;
    margin-top: 0;
}


/* --------------------------------------------------------------------------
   19 Záložné písmo s rozmermi Poppins a Roboto (kým sa načítajú z Google Fonts). Kitový @import má
   display=swap: text sa najprv vykreslí systémovým písmom (Arial/Helvetica) a po načítaní webového písma sa
   prezalomí - Poppins je o 7-13 % širší, dvojriadkový H1 posunul celú stránku (CLS 0,155 na Čo patrí pri
   1024 px, 0,12 na Online objednávke pri 768 px). Rovnaké písma a farby ako p-k.sk - mení sa iba náhradné
   písmo počas načítania: Arial zväčšený na šírku webového písma (size-adjust) s jeho výškou riadka.
   Hodnoty: pomer šírok na textoch tohto webu (nadpisy h1-h3 pre Poppins, odseky pre Roboto) a metriky
   z hlavičiek písiem - skript scratchpad opravy1/fonty-metriky.py, kontrola 8. 11. 2026. Android Arial nemá:
   local() sa preskočí a platí sans-serif (Roboto) ako doteraz.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "kn-poppins-zaloha";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 100 500;
    size-adjust: 112%;
    ascent-override: 93.7%;
    descent-override: 31.2%;
    line-gap-override: 8.9%;
}

@font-face {
    font-family: "kn-poppins-zaloha";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold");
    font-weight: 600 900;
    size-adjust: 106.7%;
    ascent-override: 98.4%;
    descent-override: 32.8%;
    line-gap-override: 9.4%;
}

@font-face {
    font-family: "kn-roboto-zaloha";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 100 600;
    size-adjust: 99.5%;
    ascent-override: 93.2%;
    descent-override: 24.5%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "kn-roboto-zaloha";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold");
    font-weight: 700 900;
    size-adjust: 94.4%;
    ascent-override: 98.3%;
    descent-override: 25.9%;
    line-gap-override: 0%;
}

:root {
    --body-font: 'Roboto', "kn-roboto-zaloha", sans-serif;
    --heading-font: "Poppins", "kn-poppins-zaloha", sans-serif;
}


/* ===== Stránka: home (body.page-home) ===== */
/* ==========================================================================
   kontajnernaodpad.sk - úvodná stránka (WEBSTATIC/templates/sk/home.php)
   Všetky pravidlá s prefixom body.page-home - platia iba na tejto stránke.
   ========================================================================== */


/* --- Hero: kitový variant index-3 (.home-3 na sekcii) - statický split, fotka vpravo so žltým
   rámikom (kitový theme-color), kicker vo vetnom tvare bez podčiarknutia, zvýraznenie v H1 žltou
   (p-k.sk má v slideri obrysové písmo). --- */
body.page-home .kn-hero-uvod {
    background-image: url(../img/obsah/uvod-hero-pozadie.jpg);
}

body.page-home .home-3 .hero-single {
    padding-top: 70px;
    padding-bottom: 150px;
}

body.page-home .hero-single .hero-content .hero-sub-title {
    font-size: 18px;
    letter-spacing: .5px;
    margin: 0;
}

body.page-home .hero-single .hero-content .hero-sub-title::before {
    display: none;
}

body.page-home .hero-single .hero-content .hero-sub-title i {
    color: var(--theme-color);
    margin-right: 6px;
}

body.page-home .hero-single .hero-content .hero-title {
    font-size: 50px;
    line-height: 1.15;
    margin: 16px 0 20px;
}

body.page-home .hero-single .hero-content .hero-title span {
    color: var(--theme-color);
    -webkit-text-stroke: 0;
}

body.page-home .hero-single .hero-content .hero-btn {
    margin-top: 30px;
}

body.page-home .hero-single .hero-content .hero-btn .theme-btn {
    font-size: 17px;
    padding: 13px 26px;
}

body.page-home .hero-single .hero-content p.kn-hero-note,
body.page-home .hero-single .hero-content p.kn-hero-tel {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

body.page-home .hero-single .hero-content p.kn-hero-note {
    margin-top: 18px;
}

body.page-home .hero-single .hero-content p.kn-hero-note i {
    color: var(--theme-color);
    margin-right: 5px;
}

body.page-home .hero-single .hero-content .kn-hero-tel a {
    color: var(--theme-color);
}

body.page-home .hero-single .hero-content .kn-hero-tel a:hover {
    color: var(--color-white);
}

@media all and (max-width: 1199px) {
    body.page-home .hero-single .hero-content .hero-title {
        font-size: 40px;
    }
}

@media all and (max-width: 767px) {
    body.page-home .home-3 .hero-single {
        padding-top: 50px;
    }

    body.page-home .hero-single .hero-content .hero-title {
        font-size: 32px;
    }

    body.page-home .hero-single .hero-content p {
        font-size: 16px;
        line-height: 1.7;
    }
}


/* --- Veľkosti (pricing-area): karty v riadku rovnako vysoké (kit ich má v karuseli) --- */
body.page-home .pricing-area .pricing-item {
    height: 100%;
}


/* --- „Bez starostí“ (video-area bez videa): fotka do pravého okraja - auto P + K s naloženým kontajnerom
   (od 9. 11. 2026, predtým hromada odpadu po búraní; Peter: bližšie k téme). Celý záber 3:2, kit ho oreže na stred. --- */
body.page-home .kn-bez-starosti-foto {
    background-image: url(../img/obsah/uvod-bez-starosti-kontajner.jpg);
}


/* --- Spoľahlivý partner (skill-area): značka certifikátu vedľa tlačidla --- */
body.page-home .kn-partner-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 30px;
}

body.page-home .kn-partner-cta img {
    width: 120px;
}


/* --- Objednávka (quote-area): fotka vozidla FUSO vľavo od karty formulára. Vozidlo začína pri ľavom okraji
   obrázka - pozadie zarovnané vľavo (kit: center orezal pri 1280-1600 px predok s nápisom „ODVOZ ODPADOV“),
   rovnako ako na /online-objednavka. --- */
body.page-home .kn-quote-uvod {
    background-image: url(../img/obsah/uvod-objednavka-pozadie.jpg);
    background-position: left center;
}

/* ===== Stránka: o-firme (body.page-o-firme) ===== */
/* ==========================================================================
   kontajnernaodpad.sk - stránka O firme (WEBSTATIC/templates/sk/o-firme.php)
   Všetky pravidlá s prefixom body.page-o-firme - platia iba na tejto stránke.

   Obsah: hlavička · o nás (about-area) · náš príbeh (video-area) · ako pristupujeme k práci
   (service-area2) · P + K v číslach (counter-area2) · certifikácia (choose-area) · CTA pás
   ========================================================================== */


/* --- Hlavička podstránky: L11 vozový park MAN (pripravila Etapa B, 1920x560) --- */
body.page-o-firme .site-breadcrumb {
    background-image: url(../img/obsah/hlavicka-o-firme.jpg);
}


/* --- O nás (kitový about-area). Kit má v odznaku <h5> - tu dva odseky (nie nadpis), text tmavý,
   lebo biela na žltej #fcb400 má kontrast iba 1,8:1 (pravidlo 06-dizajn-system kap. 3). --- */
body.page-o-firme .kn-o-nas .about-experience {
    padding: 16px 26px 14px;
}

body.page-o-firme .kn-o-nas .about-experience p {
    color: var(--color-dark);
    line-height: 1.2;
}

body.page-o-firme .kn-o-nas .about-experience .kn-exp-text {
    font-size: 15px;
}

body.page-o-firme .kn-o-nas .about-experience .kn-exp-cislo {
    font-family: var(--heading-font);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
}

body.page-o-firme .kn-o-nas .about-right .about-text + .about-text {
    margin-top: 14px;
}

body.page-o-firme .kn-o-nas .about-item .content p {
    font-size: 15px;
    line-height: 1.6;
}

/* pod 992 px je stĺpec na celú šírku - fotky (zdroj B04 má len 640x480) by sa nafúkli a zmäkli */
@media all and (max-width: 991px) {
    body.page-o-firme .kn-o-nas .about-left {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* --- Náš príbeh (video-area bez videa) na svetlom pásme .bg: fotka do pravého okraja má výšku
   textu, nie celého pásma s odsadením 100 px (kit ju roztiahne na 100 % výšky sekcie). --- */
body.page-o-firme .kn-pribeh-foto {
    background-image: url(../img/obsah/o-firme-vozovy-park.jpg);
}

@media all and (min-width: 992px) {
    body.page-o-firme .kn-pribeh .video-content {
        top: 100px;
        height: calc(100% - 200px);
    }
}

/* 992-1199 px: fotka je takmer štvorcová - pri centrovaní by z oboch vozidiel ostali polovice; ukáže sa celé
   pravé vozidlo (s drapákom) a stred dvora */
@media all and (min-width: 992px) and (max-width: 1199px) {
    body.page-o-firme .kn-pribeh-foto {
        background-position: right center;
    }
}


/* --- Prečo P + K (feature-area): kitové číslo 01-05 sedí pod ikonou (absolútne pri spodnom okraji).
   Pri krátkom texte (mobil) by ho ikona prekryla - karta preto má minimálnu výšku. --- */
body.page-o-firme .kn-preco .feature-item {
    min-height: 165px;
}


/* --- Ako pristupujeme k práci (service-area2): karty bez tlačidla (rovnaká výška je spoločná, sekcia 18),
   miesto pre kitové číslo 01-04 v pravom dolnom rohu. --- */
body.page-o-firme .kn-pristup .service-item {
    padding: 20px 20px 70px;
}

body.page-o-firme .kn-pristup .service-content p {
    margin-bottom: 0;
}


/* --- P + K v číslach (counter-area2 bez prekrytia): pod popisom veta „čo to pre vás znamená“ (.kn-counter-note
   a nestláčaná ikona sú spoločné, sekcia 10); odstup obsahu od okraja karty, statické číslo (51 000) má veľkosť
   ako počítadlá. --- */
body.page-o-firme .kn-cisla .counter-item .content {
    padding-right: 18px;
}

body.page-o-firme .kn-cisla .counter-item .counter-static {
    font-size: 50px;
}

/* mobil: karty na celú šírku (col-12) - spoločné pravidlo pre 2 x 2 karty úvodu ich zmenšuje priveľmi */
@media all and (max-width: 575px) {
    body.page-o-firme .kn-cisla .counter-item {
        gap: 12px;
        padding: 14px 10px 14px 14px;
    }

    body.page-o-firme .kn-cisla .counter-item .icon {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        line-height: 64px;
    }

    body.page-o-firme .kn-cisla .counter-item .icon i {
        font-size: 26px;
    }

    body.page-o-firme .kn-cisla .counter-item .counter,
    body.page-o-firme .kn-cisla .counter-item .counter-static {
        font-size: 38px;
    }

    body.page-o-firme .kn-cisla .counter-item .unit {
        font-size: 20px;
    }

    body.page-o-firme .kn-cisla .counter-item .title {
        font-size: 15px;
        margin-top: 8px;
    }
}


/* --- Certifikácia (choose-area): odkazy na certifikáty a oprávnenia na p-k.sk --- */
body.page-o-firme .kn-cert-odkazy {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 24px;
}


/* --- CTA pás: odkazy v texte (cenník, kontakt) tmavé a podčiarknuté - kitový a:hover je žltý,
   na žltom páse by zmizol. --- */
body.page-o-firme .cta-content p:not(.kn-cta-tel) a {
    color: var(--color-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.page-o-firme .cta-content p:not(.kn-cta-tel) a:hover {
    color: var(--theme-color2);
}

/* ===== Stránka: cennik (body.page-cennik) ===== */
/* ==========================================================================
   kontajnernaodpad.sk - Cenník (WEBSTATIC/templates/sk/cennik.php)
   Všetky pravidlá s prefixom body.page-cennik - platia iba na tejto stránke.

   Vlastný modul .kn-cennik-* (kit Constro tabuľku cien nemá - playbook to pripúšťa), v jazyku kitu:
   biela karta s radius 30 px a tieňom --box-shadow, fotka s radius 20 px, ikonový kruh theme-color,
   nadpisy Poppins (--heading-font), čiary --border-info-color. Pri veľkosti iba ikona a nadpis - bez sumy „od“
   (rozhodnutie 9. 11. 2026), ceny sú iba v tabuľke.
   Okolo neho kitové moduly: site-heading, service-details .list, service-sidebar .widget, cta-area.

   Obsah: 01 hlavička · 02 skok na veľkosť · 03 karta · 04 veľkosť · 05 tabuľka · 06 tabuľka na mobile ·
          07 poznámky · 08 záloha (surové HTML) · 09 výpadok · 10 čo je v cene + widget
   ========================================================================== */


/* --- 01 Hlavička podstránky: fotka L04 (Mitsubishi s kontajnerom), pripravila Etapa B (1920x560) --- */
body.page-cennik .site-breadcrumb {
    background-image: url(../img/obsah/hlavicka-cennik.jpg);
}


/* --- 02 Výber veľkosti v perexe (prvá obrazovka): popis + pilulky (tvar kitového .site-title-tagline)
   s kotvami na karty. Na desktope v jednom riadku, na mobile sa zalomí. --- */
body.page-cennik .kn-cennik-skok {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 16px;
    margin-top: 26px;
}

body.page-cennik .kn-cennik-skok-text {
    margin: 0;
    color: var(--color-dark);
    font-weight: 500;
}

body.page-cennik .kn-cennik-skok ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.page-cennik .kn-cennik-skok a {
    display: inline-block;
    padding: 7px 20px;
    border: 1px solid var(--border-info-color);
    border-radius: 50px;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    color: var(--color-dark);
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    transition: var(--transition2);
}

body.page-cennik .kn-cennik-skok a:hover {
    border-color: var(--theme-color2);
    background: var(--theme-color2);
    color: var(--color-white);
}

/* CTA riadok perexu pod výberom veľkosti - menší odstup, nech blok drží pokope */
body.page-cennik .kn-cennik-skok + .kn-perex-cta {
    margin-top: 30px;
}

/* dotykové obrazovky: pilulka vysoká aspoň 44 px (inak 37-39 px) */
@media all and (max-width: 991px) {
    body.page-cennik .kn-cennik-skok a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* mobil: 4 pilulky v riadku (2, 5, 7, 8 / 13, 26, 30 m³), posledný riadok na stred - nie 6 + 1 */
@media all and (max-width: 575px) {
    body.page-cennik .kn-cennik-skok-text {
        flex-basis: 100%;
    }

    body.page-cennik .kn-cennik-skok ul {
        gap: 8px;
    }

    body.page-cennik .kn-cennik-skok li {
        flex: 0 0 calc(25% - 6px);
    }

    body.page-cennik .kn-cennik-skok a {
        display: block;
        padding: 10px 4px;
        font-size: 15px;
        text-align: center;
    }
}


/* --- 03 Karta (jedna fotka vozidla + jedna alebo viac veľkostí, ktoré vozidlo pristavuje) --- */
body.page-cennik .kn-cennik-karta {
    padding: 30px;
    border-radius: 30px;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
}

body.page-cennik .kn-cennik-karta + .kn-cennik-karta {
    margin-top: 30px;
}

body.page-cennik .kn-cennik-foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}

/* fotka ide pri dlhšej karte (13, 26 a 30 m³) s obsahom - zostane pod fixnou navigáciou */
@media all and (min-width: 992px) {
    body.page-cennik .kn-cennik-foto {
        position: sticky;
        top: 120px;
    }
}

/* pod 992 px je fotka nad tabuľkou na celú šírku karty - nižší výrez 3:2 (z 4:3), nech tabuľka nezačína
   až pod ohybom; 3:2 ešte drží celé vozidlo (2:1 orezávalo strechu kabíny FUSO aj Arocs) */
@media all and (max-width: 991px) {
    body.page-cennik .kn-cennik-foto img {
        aspect-ratio: 3 / 2;
        object-fit: cover;
        object-position: center 40%;
    }
}

@media all and (max-width: 575px) {
    body.page-cennik .kn-cennik-karta {
        padding: 20px 18px;
        border-radius: 24px;
    }

    body.page-cennik .kn-cennik-foto img {
        border-radius: 16px;
    }
}


/* --- 04 Veľkosť: ikona, nadpis h3 „Kontajner 7 m³“ (bez sumy), pod tabuľkou odkaz na Veľkosti --- */

/* Kotva #kontajner-<X>-m3 (pilulky, odkazy z iných stránok): odsadenie pod fixnou navigáciou rieši spoločné
   pravidlo .main [id] (sekcia 10) - obal navigácie drží miesto, obsah po zrolovaní neposkočí. */
body.page-cennik .kn-cennik-velkost + .kn-cennik-velkost {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--border-info-color);
}

body.page-cennik .kn-cennik-hlava {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

body.page-cennik .kn-cennik-ikona {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    line-height: 54px;
    border-radius: 50px;
    background: var(--theme-color);
    color: var(--color-white);
    font-size: 22px;
    text-align: center;
}

body.page-cennik .kn-cennik-hlava h3 {
    margin: 0;
    color: var(--color-dark);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

body.page-cennik .kn-cennik-vhodne {
    margin: 16px 0 0;
    font-size: 15px;
}

body.page-cennik .kn-cennik-vhodne a {
    padding: 9px 0;            /* plocha na dotyk ~44 px, riadok sa nezvýši (inline) */
    color: var(--theme-color2);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(8, 80, 122, .35);
    text-underline-offset: 4px;
}

body.page-cennik .kn-cennik-vhodne a:hover {
    color: var(--color-dark);
    text-decoration-color: currentColor;
}

body.page-cennik .kn-cennik-vhodne a i {
    margin-left: 7px;
    font-size: 13px;
}

@media all and (max-width: 575px) {
    body.page-cennik .kn-cennik-ikona {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        line-height: 46px;
        font-size: 19px;
    }

    body.page-cennik .kn-cennik-hlava h3 {
        font-size: 21px;
    }
}


/* --- 05 Tabuľka cien (druh odpadu + kat. č., limit, cena, doplatok, objednávka) --- */
body.page-cennik .kn-cennik-tab {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.45;
}

body.page-cennik .kn-cennik-tab thead th {
    padding: 10px 12px;
    border-bottom: 2px solid var(--theme-color);
    color: var(--body-text-color);
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    vertical-align: bottom;
    text-wrap: balance;        /* „Doplatok za tonu / navyše bez DPH“, nie „DPH“ samo na riadku */
}

body.page-cennik .kn-cennik-tab tbody th,
body.page-cennik .kn-cennik-tab tbody td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--border-info-color);
    color: var(--color-dark);
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
}

body.page-cennik .kn-cennik-tab thead th:first-child,
body.page-cennik .kn-cennik-tab tbody th {
    padding-left: 0;
}

body.page-cennik .kn-cennik-tab tbody tr:last-child > th,
body.page-cennik .kn-cennik-tab tbody tr:last-child > td {
    border-bottom: 0;
}

body.page-cennik .kn-cennik-tab tbody tr:hover > th,
body.page-cennik .kn-cennik-tab tbody tr:hover > td {
    background: var(--theme-bg-light);
}

body.page-cennik .kn-cennik-tab .kn-cennik-cislo {
    text-align: right;
    white-space: nowrap;
}

body.page-cennik .kn-cennik-tab thead th.kn-cennik-cislo {
    white-space: normal;
}

body.page-cennik .kn-cennik-druh {
    display: block;
    font-weight: 600;
}

body.page-cennik .kn-cennik-kat {
    display: block;
    margin-top: 2px;
    color: var(--body-text-color);
    font-size: 13px;
}

body.page-cennik .kn-cennik-tab .kn-cennik-cena {
    font-family: var(--heading-font);
    font-size: 17px;
    font-weight: 700;
}

body.page-cennik .kn-cennik-tab .kn-cennik-akcia {
    width: 1%;
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
}

/* Plocha na dotyk: odkaz je riadkový (inline) - zvislý padding zväčší klikateľnú plochu na ~44 px bez zmeny
   výšky riadka (pri mobilnom rozložení by inak mal odkaz iba 73 x 20 px). */
body.page-cennik .kn-cennik-akcia a {
    padding: 12px 0;
    color: var(--theme-color2);
    font-size: 14px;
    font-weight: 600;
}

body.page-cennik .kn-cennik-akcia a:hover {
    color: var(--color-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.page-cennik .kn-cennik-akcia a i {
    margin-left: 6px;
    font-size: 12px;
}

/* Od 768 px (tabuľka, nie bloky): pevné šírky stĺpcov - pri automatickom rozložení mali karty 2/5/7 m³ a 8-30 m³
   stĺpce posunuté o 15 px (podľa najdlhšieho názvu odpadu) a pri rolovaní cenníkom hodnoty skákali (kontrola
   8. 11. 2026, M-19). Šírky z merania obsahu: „Objednať →“ potrebuje 85 px (pri 768 px má 89), hlavička doplatku
   sa zmestí na 2 riadky; druh odpadu dostane viac miesta ako predtým. */
@media all and (min-width: 768px) {
    body.page-cennik .kn-cennik-tab {
        table-layout: fixed;
    }

    body.page-cennik .kn-cennik-tab thead th:nth-child(1) {
        width: 34%;
    }

    body.page-cennik .kn-cennik-tab thead th:nth-child(2) {
        width: 16%;
    }

    body.page-cennik .kn-cennik-tab thead th:nth-child(3) {
        width: 15%;
    }

    body.page-cennik .kn-cennik-tab thead th:nth-child(4) {
        width: 21%;
    }

    body.page-cennik .kn-cennik-tab thead th:nth-child(5) {
        width: 14%;
    }
}


/* --- 06 Tabuľka na mobile: riadok = blok (druh + kat. č. cez celú šírku, pod ním 3 hodnoty s popiskom
   z data-label, potom odkaz). Atribúty role v HTML držia sémantiku tabuľky aj pri display: block. --- */
@media all and (max-width: 767px) {
    body.page-cennik .kn-cennik-tab,
    body.page-cennik .kn-cennik-tab tbody,
    body.page-cennik .kn-cennik-tab tr,
    body.page-cennik .kn-cennik-tab th,
    body.page-cennik .kn-cennik-tab td {
        display: block;
    }

    body.page-cennik .kn-cennik-tab thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.page-cennik .kn-cennik-tab tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: end;          /* hodnoty v jednej línii, aj keď sa popisok „Doplatok… bez DPH“ zalomí */
        gap: 8px 12px;
        padding: 14px 0;
        border-bottom: 1px solid var(--border-info-color);
    }

    body.page-cennik .kn-cennik-tab tbody tr:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    body.page-cennik .kn-cennik-tab tbody th,
    body.page-cennik .kn-cennik-tab tbody td,
    body.page-cennik .kn-cennik-tab .kn-cennik-cislo,
    body.page-cennik .kn-cennik-tab .kn-cennik-akcia {
        width: auto;
        padding: 0;
        border-bottom: 0;
        text-align: left;
    }

    body.page-cennik .kn-cennik-tab tbody th,
    body.page-cennik .kn-cennik-tab .kn-cennik-akcia {
        grid-column: 1 / -1;
    }

    /* popisok hodnoty (nesie aj „bez DPH“): 13 px ako kat. č. - pri 12 px bol najmenším textom webu
       (kontrola 8. 11. 2026, M-14); farba = sivý text tela ako na p-k.sk (rozhodnutie klienta, TODO E) */
    body.page-cennik .kn-cennik-tab td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--body-text-color);
        font-family: var(--body-font);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.3;
        white-space: normal;
    }

    body.page-cennik .kn-cennik-tab tbody tr:hover > th,
    body.page-cennik .kn-cennik-tab tbody tr:hover > td {
        background: none;
    }
}


/* --- 07 Poznámky z cenníka p-k (napr. platnosť) pod kartami --- */
body.page-cennik .kn-cennik-pozn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}

body.page-cennik .kn-cennik-pozn p {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 22px;
    border-radius: 50px;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    color: var(--color-dark);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

body.page-cennik .kn-cennik-pozn i {
    color: var(--theme-color2);
}


/* --- 08 Záloha: surové HTML z admina p-k po vozidlách (parser zlyhal) - nadpisy z DB sú h4 --- */
body.page-cennik .kn-cennik-titul {
    margin-bottom: 18px;
    color: var(--color-dark);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

body.page-cennik .kn-cennik-html h4 {
    position: relative;
    margin: 24px 0 8px;
    padding-left: 16px;
    color: var(--color-dark);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

body.page-cennik .kn-cennik-html h4::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 4px;
    border-radius: 4px;
    background: var(--theme-color);
}

body.page-cennik .kn-cennik-html h4:first-child,
body.page-cennik .kn-cennik-html h4 + h4 {
    margin-top: 0;
}

body.page-cennik .kn-cennik-html h4 + h4 {
    margin-top: 2px;
}

body.page-cennik .kn-cennik-html ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.page-cennik .kn-cennik-html li {
    padding: 7px 0 7px 16px;
    border-bottom: 1px solid var(--border-info-color);
    color: var(--color-dark);
    font-size: 15px;
    line-height: 1.5;
}

body.page-cennik .kn-cennik-html p {
    margin: 14px 0 0;
    color: var(--color-dark);
}


/* --- 09 Výpadok dát (DB aj cache nedostupné, stránka má 503): náhradný text + tlačidlá.
   Spoločný .kn-fallback má pozadie #F6F6F6 - na sivej sekcii .bg by splynul, preto biely ako karty. --- */
body.page-cennik .kn-cennik-area .kn-fallback {
    margin: 0;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
}

body.page-cennik .kn-cennik-vypadok-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}


/* --- 10 Čo je v cene a ako čítať cenník: kitový zoznam service-details (.list) s ikonami v kruhu
   + kitový widget service-sidebar (odkazy a telefón). Kit má v zozname ikonu v riadku textu -
   pri dvojriadkových bodoch ikona v stĺpci. Špecifickosť cez .service-details (kit 0-3-1). --- */
body.page-cennik .kn-cennik-info .service-details {
    margin-top: 24px;
}

body.page-cennik .service-details .kn-cennik-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.page-cennik .service-details .kn-cennik-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-info-color);
    color: var(--color-dark);
    font-weight: 400;
    line-height: 1.65;
}

body.page-cennik .service-details .kn-cennik-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

body.page-cennik .service-details .kn-cennik-list li i {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50px;
    background: rgba(252, 180, 0, .16);
    color: var(--theme-color2);
    font-size: 18px;
    line-height: 44px;
    text-align: center;
}

body.page-cennik .service-details .kn-cennik-list a {
    color: var(--theme-color2);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.page-cennik .service-details .kn-cennik-list a:hover {
    color: var(--color-dark);
}

body.page-cennik .service-sidebar .widget .title {
    margin-bottom: 22px;
    font-size: 22px;
    line-height: 1.35;
}

body.page-cennik .kn-cennik-widget-text {
    margin: 0 0 18px;
}

body.page-cennik .service-sidebar .category a:hover {
    color: var(--theme-color2);
}

body.page-cennik .service-sidebar .service-download {
    margin-top: 26px;
}

body.page-cennik .service-sidebar .service-download a {
    text-align: center;
    font-family: var(--heading-font);
    font-size: 17px;
    font-weight: 600;
}

body.page-cennik .kn-cennik-widget-cas {
    margin: 8px 0 0;
    font-size: 14px;
    text-align: center;
}

@media all and (min-width: 992px) {
    body.page-cennik .kn-cennik-info .service-sidebar {
        padding-left: 20px;
    }
}

/* ===== Stránka: velkosti-kontajnerov (body.page-velkosti-kontajnerov) ===== */
/* ==========================================================================
   kontajnernaodpad.sk - Veľkosti kontajnerov (WEBSTATIC/templates/sk/velkosti-kontajnerov.php)
   Všetky pravidlá s prefixom body.page-velkosti-kontajnerov - platia iba na tejto stránke.

   01 Hlavička podstránky (fotka)
   02 Prvá sekcia: podnadpis + úvodný odsek; nadpisy sekcií (vyvážené zalomenie, rozsah m³)
   03 Rýchly prehľad - vlastný modul .kn-size-table (kit tabuľku nemá); na mobile riadky ako karty
   04 Karty veľkostí - kitový .service-item (rovnaká výška, tlačidlo dole, odkaz na ceny v cenníku, druhy odpadu)
   05 Ako pristavenie funguje - kitový choose-area (text v riadku nadpisu, odkazy v bodoch)
   ========================================================================== */


/* --------------------------------------------------------------------------
   01 Hlavička podstránky - D06 (veľký hákový kontajner + manipulátor), 1920x560 pod prekrytím 80 %
   -------------------------------------------------------------------------- */
body.page-velkosti-kontajnerov .site-breadcrumb {
    background-image: url(../img/obsah/hlavicka-velkosti.jpg);
}


/* --------------------------------------------------------------------------
   02 Prvá sekcia: podnadpis (.kn-lead, zdieľaný) + úvodný odsek (answer-first) + CTA (zdieľané)
   -------------------------------------------------------------------------- */
body.page-velkosti-kontajnerov .kn-velkosti-uvod {
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.8;
}

@media all and (max-width: 767px) {
    body.page-velkosti-kontajnerov .kn-velkosti-uvod {
        font-size: 16px;
        line-height: 1.75;
    }
}


/* 02b Nadpisy sekcií (vyvážené zalomenie je spoločné, sekcia 16): rozsah objemu „(2–8 m³):“ sa nezalomí
   za pomlčkou. Kit farbí každý span v .site-title žltou - .kn-rozsah je časť tmavého nadpisu, preto farbu
   dedí z h2. */
body.page-velkosti-kontajnerov .site-title .kn-rozsah {
    color: inherit;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   03 Rýchly prehľad - .kn-size-table (vlastný modul v jazyku kitu: biela karta s radius 30 px a kitovým
   tieňom, hlavička v theme-color2, objem ako žltá pilulka s tmavým textom = odkaz na kartu veľkosti).
   Tri stĺpce: objem (<th scope="row">), ideálny na, typický projekt. Stĺpec ceny nie je (rozhodnutie 9. 11. 2026) -
   pod tabuľkou je poznámka s odkazom na cenník.
   -------------------------------------------------------------------------- */
body.page-velkosti-kontajnerov .kn-size-table {
    background: var(--color-white);
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

body.page-velkosti-kontajnerov .kn-size-table table {
    width: 100%;
    border-collapse: collapse;
}

body.page-velkosti-kontajnerov .kn-size-table thead th {
    background: var(--theme-color2);
    color: var(--color-white);
    font-family: var(--heading-font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    padding: 18px 24px;
    text-align: left;
    white-space: nowrap;
}

body.page-velkosti-kontajnerov .kn-size-table tbody th,
body.page-velkosti-kontajnerov .kn-size-table tbody td {
    padding: 15px 24px;
    border-top: 1px solid var(--border-info-color);
    color: var(--color-dark);
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    vertical-align: middle;
}

body.page-velkosti-kontajnerov .kn-size-table tbody tr:first-child > * {
    border-top: 0;
}

body.page-velkosti-kontajnerov .kn-size-table tbody tr:nth-child(even) > * {
    background: var(--theme-bg-light);
}

body.page-velkosti-kontajnerov .kn-size-table tbody th {
    width: 1%;
    white-space: nowrap;
}

body.page-velkosti-kontajnerov .kn-size-objem {
    display: inline-block;
    min-width: 82px;
    padding: 3px 16px;
    border-radius: 50px;
    background: var(--theme-color);
    color: var(--color-dark);
    font-family: var(--heading-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    white-space: nowrap;
}

body.page-velkosti-kontajnerov a.kn-size-objem:hover {
    background: var(--theme-color2);
    color: var(--color-white);
}

body.page-velkosti-kontajnerov .kn-size-pozn a {
    display: inline;           /* kit: inline-block - bodka za „cenníku“ by mohla začať riadok */
    color: var(--color-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.page-velkosti-kontajnerov .kn-size-pozn a:hover {
    color: var(--theme-color2);
}

body.page-velkosti-kontajnerov .kn-size-pozn {
    margin: 22px 0 0;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}

/* mobil: každý riadok je karta - objem (pilulka) hore, popisy pod ním so štítkom z data-label */
@media all and (max-width: 767px) {
    body.page-velkosti-kontajnerov .kn-size-table {
        border-radius: 24px;
    }

    body.page-velkosti-kontajnerov .kn-size-table table,
    body.page-velkosti-kontajnerov .kn-size-table tbody,
    body.page-velkosti-kontajnerov .kn-size-table tr,
    body.page-velkosti-kontajnerov .kn-size-table tbody th,
    body.page-velkosti-kontajnerov .kn-size-table tbody td {
        display: block;
        width: auto;
    }

    body.page-velkosti-kontajnerov .kn-size-table thead {
        display: none;
    }

    body.page-velkosti-kontajnerov .kn-size-table tbody tr {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 10px 14px;
        padding: 18px 20px;
        border-top: 1px solid var(--border-info-color);
    }

    body.page-velkosti-kontajnerov .kn-size-table tbody tr:first-child {
        border-top: 0;
    }

    body.page-velkosti-kontajnerov .kn-size-table tbody tr:nth-child(even) {
        background: var(--theme-bg-light);
    }

    /* bunky bez vlastného pozadia a okraja - pruhovanie a čiara sú na riadku (karte) */
    body.page-velkosti-kontajnerov .kn-size-table tbody tr > *,
    body.page-velkosti-kontajnerov .kn-size-table tbody tr:nth-child(even) > * {
        padding: 0;
        border: 0;
        background: transparent;
    }

    body.page-velkosti-kontajnerov .kn-size-table tbody th {
        grid-column: 1;
        grid-row: 1;
    }

    body.page-velkosti-kontajnerov .kn-size-table tbody td {
        grid-column: 1 / -1;
        line-height: 1.55;
    }

    body.page-velkosti-kontajnerov .kn-size-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 1px;
        color: var(--theme-color2);
        font-family: var(--heading-font);
        font-size: 13px;
        font-weight: 600;
    }
}


/* --------------------------------------------------------------------------
   04 Karty veľkostí - kitový .service-item v statickej mriežke: rovnaká výška v riadku (height 100 %,
   obsah flex: 1, tlačidlo dole), bez kitového margin-top 20 px (inak by karta pretiekla stĺpec).
   Nadpis h3 bez odkazu (kit h4 > a), pod ním textový odkaz na ceny veľkosti v cenníku (nie suma - rozhodnutie
   9. 11. 2026), štítok „Náš najväčší“ na fotke 30 m³.
   -------------------------------------------------------------------------- */
body.page-velkosti-kontajnerov .kn-velkosti-karty .service-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: 0;
}

body.page-velkosti-kontajnerov .kn-velkosti-karty .service-img {
    position: relative;
}

/* Kitový odznak s ikonou (90 px, prekrýva roh fotky o 75 px) zakrýval na fotkách 7 a 8 m³ kabínu vozidla a pri
   5 m³ nápis na streche - fotka má pri 4 kartách v riadku iba 246 px (kontrola 8. 11. 2026, M-18). Menší odznak
   v rovnakom tvare: prekrytie 51 px, vozidlá ostávajú celé. */
body.page-velkosti-kontajnerov .kn-velkosti-karty .service-icon {
    width: 66px;
    height: 66px;
    border-width: 6px;
}

body.page-velkosti-kontajnerov .kn-velkosti-karty .service-icon i {
    font-size: 25px;
}

body.page-velkosti-kontajnerov .kn-velkosti-karty .service-img img {
    display: block;
    width: 100%;
}

body.page-velkosti-kontajnerov .kn-velkost-stitok {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 3px 14px;
    border-radius: 50px;
    background: var(--theme-color);
    color: var(--color-dark);
    font-family: var(--heading-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
    box-shadow: var(--box-shadow2);
}

body.page-velkosti-kontajnerov .kn-velkosti-karty .service-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 22px;
    padding: 0 8px 8px;
}

body.page-velkosti-kontajnerov .kn-velkosti-karty .service-title {
    color: var(--color-dark);
}

body.page-velkosti-kontajnerov .kn-velkosti-karty .service-content p {
    margin: 0;
}

/* odkaz „Ceny X m³ v cenníku“ (cennik#kontajner-<X>-m3; krátky ako tlačidlo „Objednať X m³“ - pri 4 kartách v rade
   sa zmestí do 1 riadka) - vzhľad ako zrkadlový odkaz na /cennik („Na čo sa hodí kontajner X m³“); inline, aby sa
   šípka držala posledného slova, padding = plocha na dotyk ~44 px (namerané) bez zvýšenia riadka */
body.page-velkosti-kontajnerov .kn-velkosti-karty .service-content .kn-velkost-cennik {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.6;
}

body.page-velkosti-kontajnerov .kn-velkost-cennik a {
    display: inline;
    padding: 13px 0;
    color: var(--theme-color2);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(8, 80, 122, .35);
    text-underline-offset: 4px;
}

body.page-velkosti-kontajnerov .kn-velkost-cennik a:hover,
body.page-velkosti-kontajnerov .kn-velkost-cennik a:focus-visible {
    color: var(--color-dark);
    text-decoration-color: currentColor;
}

body.page-velkosti-kontajnerov .kn-velkost-cennik a i {
    display: inline;
    margin-left: 7px;
    font-size: 13px;
}

body.page-velkosti-kontajnerov .kn-velkosti-karty .service-content .kn-velkost-text {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.7;
}

body.page-velkosti-kontajnerov .kn-velkost-text strong {
    color: var(--color-dark);
    font-weight: 600;
}

body.page-velkosti-kontajnerov .kn-velkost-plus i {
    margin-right: 6px;
    color: var(--theme-color2);
}

body.page-velkosti-kontajnerov .kn-velkosti-karty .service-content .kn-velkost-druhy-titulok {
    margin-top: 14px;
    color: var(--color-dark);
    font-size: 15px;
    font-weight: 600;
}

body.page-velkosti-kontajnerov .kn-velkost-druhy {
    margin-top: 4px;
}

body.page-velkosti-kontajnerov .kn-velkost-druhy li {
    position: relative;
    margin-top: 5px;
    padding-left: 26px;
    color: var(--color-dark);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

body.page-velkosti-kontajnerov .kn-velkost-druhy li i {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--theme-color);
}

/* Druh odpadu = odkaz na jeho kartu na Čo patrí do kontajnera (#druh-<kľúč>); názvy ako vo formulári (C-5, C-8) */
body.page-velkosti-kontajnerov .kn-velkost-druhy li a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(8, 80, 122, .3);
    text-underline-offset: 3px;
}

body.page-velkosti-kontajnerov .kn-velkost-druhy li a:hover,
body.page-velkosti-kontajnerov .kn-velkost-druhy li a:focus-visible {
    color: var(--theme-color2);
    text-decoration-color: currentColor;
}

body.page-velkosti-kontajnerov .kn-velkost-btn {
    margin-top: auto;
    padding-top: 26px;
}

body.page-velkosti-kontajnerov .kn-velkosti-pozn {
    margin: 30px 0 0;
    font-size: 14px;
    text-align: center;
}


/* --------------------------------------------------------------------------
   05 Ako pristavenie funguje - kitový choose-area: text v pravom stĺpci riadku nadpisu (ako v kite),
   odkazy v bodoch podčiarknuté (v sivom texte by tmavý odkaz bez podčiarknutia zanikol).
   Úvodná veta zoznamu („…myslite na pár vecí:“) je nad bodmi v ľavom stĺpci - vpravo nad fotkou oko
   preskakovalo sprava doľava (kontrola 8. 11. 2026, D-17).
   -------------------------------------------------------------------------- */
body.page-velkosti-kontajnerov .kn-pristavenie-uvod {
    font-size: 17px;
    line-height: 1.8;
}

body.page-velkosti-kontajnerov .kn-pristavenie-zoznam {
    margin: 0;
    color: var(--color-dark);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
}

body.page-velkosti-kontajnerov .choose-item-info p a {
    color: var(--color-dark);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.page-velkosti-kontajnerov .choose-item-info p a:hover {
    color: var(--theme-color2);
}

/* ===== Stránka: online-objednavka (body.page-online-objednavka) ===== */
/* ==========================================================================
   kontajnernaodpad.sk - Online objednávka (WEBSTATIC/templates/sk/online-objednavka.php)
   Všetky pravidlá s prefixom body.page-online-objednavka - platia iba na tejto stránke.

   Rytmus: hlavička (tmavá) -> perex (biela) -> formulár (fotka) -> „Kým odošlete“ (biela, svetlé
   karty + obrysová karta s preklikom na odvozodpadu.eu) -> „Čo sa stane po odoslaní“ (.bg, biele
   karty) -> „Radšej telefonicky?“ (biela, svetlé karty) -> CTA pás späť na formulár (žltý) -> pätička.

   Obsah:
   01 Hlavička podstránky - fotka FUSO Canter (pripravená v Etape B)
   02 Perex
   03 Formulár - quote-area s fotkou vozidla vľavo od karty
   04 „Kým odošlete objednávku“ (kitové .about-item ako svetlé karty)
   05 „Čo sa stane po odoslaní“ (process-area)
   06 „Radšej telefonicky?“ (contact-info)
   ========================================================================== */


/* --- 01 Hlavička podstránky: C01 FUSO Canter „ODVOZ ODPADOV“ (1920x560, ŠPZ zakrytá) --- */
body.page-online-objednavka .site-breadcrumb {
    background-image: url(../img/obsah/hlavicka-objednavka.jpg);
}


/* --- 02 Perex: iba telefón pod textom (tlačidlo netreba - formulár je hneď pod perexom). Menšie odsadenie ako na
   iných podstránkach: na stránku prichádza ten, kto chce objednať - prvé polia formulára majú byť v prvej obrazovke
   (pri 1600 x 900 začínali na 895 px). --- */
body.page-online-objednavka .kn-perex-cta {
    margin-top: 16px;
}

body.page-online-objednavka .kn-perex-sekcia.pt-80 {
    padding-top: 44px;
}

body.page-online-objednavka .kn-perex-sekcia.pb-80 {
    padding-bottom: 44px;
}

body.page-online-objednavka .quote-area.kn-quote .quote-content {
    padding-top: 36px;
}

/* nižšia hlavička (kit 110 px hore aj dole): prvý riadok polí pri 1600 x 900 aj 1366 x 768 v prvej obrazovke */
@media all and (min-width: 768px) {
    body.page-online-objednavka .site-breadcrumb {
        padding-top: 75px;
        padding-bottom: 75px;
    }
}


/* --- 03 Formulár: kitová quote-area bez prekrytia. Fotka B10 (Iveco s ramenovým nosičom na stavenisku)
   začína pri ľavom okraji obrázka, preto je pozadie zarovnané vľavo (kit: center): kabína ostáva pri
   ľavom okraji okna pri každej šírke a karta formulára prekryje zadnú časť vozidla. Pod kartou a vpravo
   od nej je rozmazaná stmavená kópia fotky (rovnaký postup ako na úvode). Zloženie a geometria:
   podklady/foto/online-objednavka/obrazky-objednavka.py --- */
body.page-online-objednavka .kn-quote-objednavka {
    background-image: url(../img/obsah/online-objednavka-pozadie.jpg);
    background-position: left center;
}

/* 992-1199 px: karta je užšia (šablóna jej dáva col-lg-8, od 1200 px col-xl-7); dvojice polí sú pod 1200 px
   pod sebou priamo v module (col-xl-*), placeholdery sa neorežú. */


/* --- 04 „Kým odošlete objednávku“: kitové .about-item (ikona v žltom kruhu + h3 + text) ako svetlé
   karty v štýle kitových .contact-info (svetlá plocha, zaoblenie). Odkaz je samostatný riadok so šípkou. --- */
body.page-online-objednavka .kn-pred-odoslanim .about-item {
    height: 100%;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 30px;
    border-radius: 30px;
    background: var(--theme-bg-light);
}

body.page-online-objednavka .kn-pred-odoslanim .about-item .icon {
    flex: 0 0 65px;
}

body.page-online-objednavka .kn-pred-odoslanim .about-item .content h3 {
    font-size: 19px;
    line-height: 1.35;
    margin: 4px 0 8px;
}

body.page-online-objednavka .kn-pred-odoslanim .about-item .content p {
    margin: 0 0 10px;
    line-height: 1.65;
}

body.page-online-objednavka .kn-pomoc-odkaz {
    padding: 8px 0;            /* plocha na dotyk ~44 px, riadok sa nezvýši (inline) */
    color: var(--theme-color2);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(8, 80, 122, .35);
    text-underline-offset: 4px;
}

body.page-online-objednavka .kn-pomoc-odkaz:hover {
    color: var(--color-dark);
    text-decoration-color: currentColor;
}

/* šípka za odkazom: FA dáva ikone inline-block, pred ktorým môže riadok zalomiť (šípka by ostala sama
   na novom riadku) - ako inline sa drží posledného slova */
body.page-online-objednavka .kn-pomoc-odkaz i {
    display: inline;
    margin-left: 7px;
    font-size: 14px;
}

/* preklik na odvozodpadu.eu (iná služba P + K) - celá šírka, tlačidlo vpravo; obrysová karta odlíši
   „inú možnosť“ od štyroch otázok k objednávke */
body.page-online-objednavka .kn-pred-odoslanim .kn-pomoc-alt {
    align-items: center;
    background: var(--color-white);
    border: 2px solid var(--border-info-color);
}

body.page-online-objednavka .kn-pomoc-alt .content p {
    margin-bottom: 0;
}

body.page-online-objednavka .kn-pomoc-alt .theme-btn2 {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* pod 992 px tlačidlo pod text: text vyplní zvyšok riadka vedľa ikony (65 px + medzera 18 px), tlačidlo
   preto zalomí na nový riadok a odsadí sa pod text; na mobile (ikona 52 + 14 px) na celú šírku */
@media all and (max-width: 991px) {
    body.page-online-objednavka .kn-pred-odoslanim .kn-pomoc-alt {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    body.page-online-objednavka .kn-pomoc-alt .content {
        flex: 1 1 calc(100% - 83px);
    }

    body.page-online-objednavka .kn-pomoc-alt .theme-btn2 {
        margin-left: 83px;
    }
}

@media all and (max-width: 575px) {
    body.page-online-objednavka .kn-pomoc-alt .content {
        flex-basis: calc(100% - 66px);
    }

    body.page-online-objednavka .kn-pomoc-alt .theme-btn2 {
        flex-basis: 100%;
        margin-left: 0;
        text-align: center;
        white-space: normal;
    }
}

@media all and (max-width: 575px) {
    body.page-online-objednavka .kn-pred-odoslanim .about-item {
        gap: 14px;
        padding: 22px 20px;
        border-radius: 25px;
    }

    body.page-online-objednavka .kn-pred-odoslanim .about-item .icon {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
    }

    body.page-online-objednavka .kn-pred-odoslanim .about-item .icon i {
        font-size: 21px;
        line-height: 52px;
    }

    body.page-online-objednavka .kn-pred-odoslanim .about-item .content h3 {
        font-size: 17px;
    }
}


/* --- 05 „Čo sa stane po odoslaní“: kitové process-item (rovnaká výška kariet je v projektovom CSS) --- */
body.page-online-objednavka .process-item .content p {
    margin-bottom: 0;
}


/* --- 06 „Radšej telefonicky?“: kitové .contact-info - karty sú spoločné (sekcia 17), tu iba text pod nadpisom. --- */
body.page-online-objednavka .contact-area .site-heading p {
    font-size: 17px;
}

/* ===== Stránka: co-patri-do-kontajnera (body.page-co-patri-do-kontajnera) ===== */
/* ==========================================================================
   kontajnernaodpad.sk - Čo patrí do kontajnera (WEBSTATIC/templates/sk/co-patri-do-kontajnera.php)
   Všetky pravidlá s prefixom body.page-co-patri-do-kontajnera - platia iba na tejto stránke.

   Obsah:
   01 Hlavička podstránky, tokeny patrí / nepatrí
   02 Perex (úvodný odsek pod .kn-lead)
   03 Patrí / nepatrí - kitový .pricing-item s modifikátormi .kn-waste--ok / --no
   04 Druhy odpadu - kitový .service-area2 (odrážky, veľkosti z cenníka - bez sumy, tlačidlo)
   05 Čo NEPATRÍ - kitový .service-single (.list s piktogramami) + widget „Máte azbest?“
   06 Triedenie - kitový .feature-area
   07 Ako kontajner správne naplniť - kitový .choose-area
   08 Poradíme - riadok nadpisu kitu s telefónom a tlačidlami
   09 Tlač (stránku si ľudia ukladajú a tlačia - ponuka)
   ========================================================================== */


/* --------------------------------------------------------------------------
   01 Hlavička podstránky a tokeny. Sémantická zelená / červená iba pre značky patrí / nepatrí
   (štítky, kruhy, odrážky) - rovnaké odtiene ako overený prototyp (podklady/navrh/kn-navrh.css).
   Kontrast na bielej: zelená 5,4:1, červená 5,6:1 (aj biely text na nich).
   -------------------------------------------------------------------------- */
body.page-co-patri-do-kontajnera {
    --kn-ok: #1B7A35;
    --kn-no: #C42B2B;
}

body.page-co-patri-do-kontajnera .site-breadcrumb {
    background-image: url(../img/obsah/hlavicka-co-patri.jpg);
}

/* Vyvážené zalomenie poznámok pod kartami (nadpisy, perex a CTA vyvažuje spoločná sekcia 16). */
body.page-co-patri-do-kontajnera .kn-prehlad-pozn,
body.page-co-patri-do-kontajnera .kn-triedenie-pozn {
    text-wrap: balance;
}


/* --------------------------------------------------------------------------
   02 Perex - podnadpis (.kn-lead) + úvodný odsek klienta (answer-first) + CTA
   -------------------------------------------------------------------------- */
body.page-co-patri-do-kontajnera .kn-perex-sekcia .kn-lead {
    font-weight: 500;
}

body.page-co-patri-do-kontajnera .kn-perex-odsek {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.8;          /* farba textu tela ako odsek na Veľkostiach (D-12); tmavý je iba .kn-lead nad ním */
}

body.page-co-patri-do-kontajnera .kn-perex-odsek a,
body.page-co-patri-do-kontajnera .kn-prehlad-pozn a,
body.page-co-patri-do-kontajnera .kn-triedenie-pozn a,
body.page-co-patri-do-kontajnera .kn-azbest-text a,
body.page-co-patri-do-kontajnera .kn-naplnenie .choose-item-info a {
    display: inline;               /* kit: inline-block - dlhý odkaz zabral celý riadok a bodka za ním ostala sama (360 px) */
    color: var(--color-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.page-co-patri-do-kontajnera .kn-perex-odsek a:hover,
body.page-co-patri-do-kontajnera .kn-prehlad-pozn a:hover,
body.page-co-patri-do-kontajnera .kn-triedenie-pozn a:hover,
body.page-co-patri-do-kontajnera .kn-azbest-text a:hover,
body.page-co-patri-do-kontajnera .kn-naplnenie .choose-item-info a:hover {
    color: var(--theme-color2);
}

@media all and (max-width: 767px) {
    body.page-co-patri-do-kontajnera .kn-perex-odsek {
        font-size: 16px;
        line-height: 1.75;
    }
}


/* --------------------------------------------------------------------------
   03 Patrí / nepatrí - 2 kitové karty .pricing-item bez ceny a tlačidla. Štítok (.pricing-header)
   a kruh (.pricing-icon) v sémantickej farbe, H3 vedľa kruhu (kit tam má sumu), odrážky s visiacim
   zalomením. Bez posunu pri hoveri (karta nie je odkaz).
   -------------------------------------------------------------------------- */
body.page-co-patri-do-kontajnera .kn-waste {
    height: 100%;
}

body.page-co-patri-do-kontajnera .kn-waste:hover {
    transform: none;
}

body.page-co-patri-do-kontajnera .kn-waste--ok .pricing-header,
body.page-co-patri-do-kontajnera .kn-waste--ok .pricing-icon {
    background: var(--kn-ok);
}

body.page-co-patri-do-kontajnera .kn-waste--no .pricing-header,
body.page-co-patri-do-kontajnera .kn-waste--no .pricing-icon {
    background: var(--kn-no);
}

body.page-co-patri-do-kontajnera .kn-waste .pricing-price {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 0;
}

body.page-co-patri-do-kontajnera .kn-waste .pricing-icon {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
}

body.page-co-patri-do-kontajnera .kn-waste .pricing-icon i {
    font-size: 30px;
}

body.page-co-patri-do-kontajnera .kn-waste-title {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
}

body.page-co-patri-do-kontajnera .kn-waste .pricing-feature {
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid var(--border-info-color);
}

body.page-co-patri-do-kontajnera .kn-waste .pricing-feature li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    line-height: 1.5;
}

body.page-co-patri-do-kontajnera .kn-waste .pricing-feature li i {
    flex: 0 0 auto;
    margin-right: 0;
}

body.page-co-patri-do-kontajnera .kn-waste--ok .pricing-feature li i {
    color: var(--kn-ok);
}

body.page-co-patri-do-kontajnera .kn-waste--no .pricing-feature li i {
    color: var(--kn-no);
}

body.page-co-patri-do-kontajnera .kn-prehlad-pozn,
body.page-co-patri-do-kontajnera .kn-triedenie-pozn {
    max-width: 780px;
    margin: 45px auto 0;
    text-align: center;
    color: var(--color-dark);
    font-size: 17px;
    line-height: 1.7;
}

body.page-co-patri-do-kontajnera .kn-prehlad-pozn i,
body.page-co-patri-do-kontajnera .kn-triedenie-pozn i {
    color: var(--theme-color2);
    margin-right: 4px;
}

@media all and (max-width: 767px) {
    body.page-co-patri-do-kontajnera .kn-waste {
        padding: 35px 25px 30px;
    }

    body.page-co-patri-do-kontajnera .kn-waste-title {
        font-size: 22px;
    }

    body.page-co-patri-do-kontajnera .kn-prehlad-pozn,
    body.page-co-patri-do-kontajnera .kn-triedenie-pozn {
        font-size: 16px;
    }
}


/* --------------------------------------------------------------------------
   04 Druhy odpadu - kitový .service-area2: karty rovnako vysoké (flex), päta karty (veľkosti z cenníka,
   tlačidlo) dorovnaná dole. Kitové číslo karty presunuté hore doprava (dole by kolidovalo s tlačidlom).
   Odrážky: prenesený štýl kitového .service-details .list, ikona podľa typu (patrí / nepatrí / tip).
   -------------------------------------------------------------------------- */
body.page-co-patri-do-kontajnera .kn-druhy .site-heading p {
    font-size: 17px;
}

/* rovnaká výška a bez kitového margin-top: spoločná sekcia 18; tu flex stĺpec kvôli päte karty dole */
body.page-co-patri-do-kontajnera .kn-druhy .service-item {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 24px;
}

body.page-co-patri-do-kontajnera .kn-druhy .service-item .count {
    top: 22px;
    bottom: auto;
    right: 22px;
}

body.page-co-patri-do-kontajnera .kn-druhy .service-icon i {
    font-size: 36px;
}

body.page-co-patri-do-kontajnera .kn-druhy .service-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.page-co-patri-do-kontajnera .kn-druhy .service-title {
    margin-bottom: 4px;
}

body.page-co-patri-do-kontajnera .kn-druh-list {
    margin: 0 0 22px;
    padding: 0;
}

body.page-co-patri-do-kontajnera .kn-druh-list li {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--body-text-color);
}

body.page-co-patri-do-kontajnera .kn-druh-list li i {
    flex: 0 0 16px;
    margin-top: 5px;
    font-size: 15px;
    text-align: center;
}

body.page-co-patri-do-kontajnera .kn-druh-list li strong {
    color: var(--color-dark);
    font-weight: 600;
}

body.page-co-patri-do-kontajnera .kn-ico-ok {
    color: var(--kn-ok);
}

body.page-co-patri-do-kontajnera .kn-ico-no {
    color: var(--kn-no);
}

body.page-co-patri-do-kontajnera .kn-ico-info {
    color: var(--theme-color2);
}

body.page-co-patri-do-kontajnera .kn-druh-pata {
    margin-top: auto;
}

body.page-co-patri-do-kontajnera .kn-druh-fakty {
    margin: 0 0 18px;
    padding-top: 12px;
    border-top: 1px solid var(--border-info-color);
}

body.page-co-patri-do-kontajnera .kn-druh-fakty div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.5;
}

body.page-co-patri-do-kontajnera .kn-druh-fakty dt {
    font-weight: 400;
    color: var(--body-text-color);
}

body.page-co-patri-do-kontajnera .kn-druh-fakty dd {
    margin: 0;
    text-align: right;
    color: var(--color-dark);
    font-weight: 500;
}


/* --------------------------------------------------------------------------
   05 Čo NEPATRÍ - kitový .service-single: .service-details .content .list s piktogramom položky
   v červenom kruhu (značka „nepatrí“), fotka elektroodpadu, widget „Máte azbest?“ na šírku obsahu.
   -------------------------------------------------------------------------- */
body.page-co-patri-do-kontajnera .kn-nepatri-uvod {
    margin: 22px 0 8px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark);
}

body.page-co-patri-do-kontajnera .service-details .content .kn-nepatri-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    line-height: 1.5;
}

body.page-co-patri-do-kontajnera .service-details .content .kn-nepatri-list i {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    margin-right: 0;
    border-radius: 50px;
    background: rgba(196, 43, 43, .1);
    color: var(--kn-no);
    text-align: center;
    font-size: 16px;
}

body.page-co-patri-do-kontajnera .kn-nepatri-foto img {
    width: 100%;
    height: auto;
    border-radius: 30px;
}

body.page-co-patri-do-kontajnera .kn-azbest {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 0;
    padding: 32px 35px;
}

body.page-co-patri-do-kontajnera .kn-azbest-ikona {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50px;
    background: var(--kn-no);
    color: var(--color-white);
    text-align: center;
    font-size: 26px;
}

body.page-co-patri-do-kontajnera .kn-azbest-text {
    flex: 1;
}

body.page-co-patri-do-kontajnera .service-sidebar .kn-azbest .title {
    font-size: 22px;
    margin-bottom: 14px;
}

body.page-co-patri-do-kontajnera .kn-azbest-text p {
    color: var(--color-dark);
    line-height: 1.7;
}

body.page-co-patri-do-kontajnera .kn-azbest-akcie {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.page-co-patri-do-kontajnera .service-sidebar .kn-azbest-akcie a {
    margin-bottom: 0;
    white-space: nowrap;
}

@media all and (max-width: 991px) {
    body.page-co-patri-do-kontajnera .kn-nepatri-foto {
        margin-top: 10px;
    }

    body.page-co-patri-do-kontajnera .kn-azbest {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 30px 25px;
    }

    body.page-co-patri-do-kontajnera .kn-azbest-akcie {
        width: 100%;
    }

    body.page-co-patri-do-kontajnera .service-sidebar .kn-azbest-akcie a {
        white-space: normal;
    }
}


/* --------------------------------------------------------------------------
   06 Triedenie - kitový .feature-area (3 tmavé karty; výška a farby h3 sú v kontajnernaodpad.css)
   -------------------------------------------------------------------------- */
body.page-co-patri-do-kontajnera .kn-triedenie .site-heading p {
    font-size: 17px;
}

body.page-co-patri-do-kontajnera .kn-triedenie .feature-wrap {
    margin-top: 30px;
}


/* --------------------------------------------------------------------------
   07 Ako kontajner správne naplniť - kitový .choose-area (ikony a h3 v kontajnernaodpad.css)
   -------------------------------------------------------------------------- */
body.page-co-patri-do-kontajnera .kn-naplnenie .choose-content {
    margin-top: 40px;
}


/* --------------------------------------------------------------------------
   08 Poradíme - riadok nadpisu kitu (H2 vľavo, text a tlačidlá vpravo) + telefón dispečingu
   -------------------------------------------------------------------------- */
body.page-co-patri-do-kontajnera .kn-poradime-tel {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
}

body.page-co-patri-do-kontajnera .kn-poradime-tel .icon {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50px;
    background: var(--theme-color);
    color: var(--color-white);
    text-align: center;
    font-size: 24px;
}

body.page-co-patri-do-kontajnera .kn-poradime-tel p {
    margin: 0;
    line-height: 1.3;
}

body.page-co-patri-do-kontajnera .kn-poradime-tel p > span {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    color: var(--body-text-color);
}

body.page-co-patri-do-kontajnera .kn-poradime-tel a {
    color: var(--color-dark);
    font-family: var(--heading-font);
    font-size: 26px;
}

body.page-co-patri-do-kontajnera .kn-poradime-tel a:hover {
    color: var(--theme-color2);
}

body.page-co-patri-do-kontajnera .kn-poradime-obsah p {
    font-size: 18px;
    line-height: 1.75;
    color: var(--color-dark);
}

body.page-co-patri-do-kontajnera .kn-poradime-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

@media all and (max-width: 767px) {
    body.page-co-patri-do-kontajnera .kn-poradime-obsah p {
        font-size: 16px;
    }

    body.page-co-patri-do-kontajnera .kn-poradime-tel a {
        font-size: 22px;
    }
}


/* --------------------------------------------------------------------------
   09 Tlač - ponuka: „stránka, ktorú si ľudia ukladajú a zdieľajú“. Tlačí sa obsah bez hlavičky
   webu, pätičky, CTA, tlačidiel a fotiek. WOW skrýva bloky mimo obrazovky (visibility: hidden) -
   pri tlači ich treba ukázať. Farebné značky patrí / nepatrí sa tlačia (print-color-adjust), veľké
   plochy nie. Flex riadky Bootstrapu a karty s height: 100 % sa v Chrome pri delení strán lámu
   (overené tlačou do PDF) - pri tlači sú riadky blokové, karty patrí / nepatrí a druhov odpadu
   v mriežke 2 stĺpcov, karty bez pevnej výšky a nedelia sa medzi strany.
   -------------------------------------------------------------------------- */
@media print {
    body.page-co-patri-do-kontajnera {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.page-co-patri-do-kontajnera * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body.page-co-patri-do-kontajnera .header,
    body.page-co-patri-do-kontajnera .footer-area,
    body.page-co-patri-do-kontajnera #scroll-top,
    body.page-co-patri-do-kontajnera .visually-hidden-focusable,
    body.page-co-patri-do-kontajnera .breadcrumb-menu,
    body.page-co-patri-do-kontajnera .kn-perex-cta,
    body.page-co-patri-do-kontajnera .kn-druh-pata .theme-btn2,
    body.page-co-patri-do-kontajnera .kn-azbest-akcie,
    body.page-co-patri-do-kontajnera .kn-poradime,
    body.page-co-patri-do-kontajnera .cta-area,
    body.page-co-patri-do-kontajnera .heading-divider,
    body.page-co-patri-do-kontajnera .site-title-tagline,
    body.page-co-patri-do-kontajnera .count,
    body.page-co-patri-do-kontajnera .kn-nepatri-foto,
    body.page-co-patri-do-kontajnera .choose-img {
        display: none !important;
    }

    body.page-co-patri-do-kontajnera .wow {
        visibility: visible !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    body.page-co-patri-do-kontajnera .site-breadcrumb {
        background: none !important;
        padding: 0 0 6px;
    }

    body.page-co-patri-do-kontajnera .site-breadcrumb::before {
        display: none;
    }

    body.page-co-patri-do-kontajnera .site-breadcrumb .breadcrumb-title {
        color: var(--color-dark);
        font-size: 24px;
    }

    body.page-co-patri-do-kontajnera .bg {
        background: none !important;
    }

    body.page-co-patri-do-kontajnera .py-100,
    body.page-co-patri-do-kontajnera .pt-80,
    body.page-co-patri-do-kontajnera .pb-80 {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    body.page-co-patri-do-kontajnera .site-heading {
        margin-bottom: 26px;
        break-after: avoid;
    }

    body.page-co-patri-do-kontajnera h2,
    body.page-co-patri-do-kontajnera h3 {
        break-after: avoid;
    }

    body.page-co-patri-do-kontajnera .container {
        max-width: none;
        padding: 0;
    }

    body.page-co-patri-do-kontajnera .row {
        display: block;
        margin: 0;
    }

    body.page-co-patri-do-kontajnera .row > * {
        width: auto;
        max-width: none;
        margin: 0 0 12px;
        padding: 0;
    }

    body.page-co-patri-do-kontajnera .kn-prehlad .row.g-4,
    body.page-co-patri-do-kontajnera .kn-druhy .row.g-4 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    body.page-co-patri-do-kontajnera .kn-prehlad .row.g-4 > *,
    body.page-co-patri-do-kontajnera .kn-druhy .row.g-4 > * {
        margin: 0;
    }

    body.page-co-patri-do-kontajnera .kn-waste,
    body.page-co-patri-do-kontajnera .kn-druhy .service-item,
    body.page-co-patri-do-kontajnera .feature-item,
    body.page-co-patri-do-kontajnera .widget,
    body.page-co-patri-do-kontajnera .choose-item {
        height: auto !important;
        break-inside: avoid;
    }

    body.page-co-patri-do-kontajnera .kn-waste,
    body.page-co-patri-do-kontajnera .kn-druhy .service-item,
    body.page-co-patri-do-kontajnera .feature-item,
    body.page-co-patri-do-kontajnera .widget {
        padding: 16px 18px;
        border: 1px solid #c8ccd2;
        background: var(--color-white);
    }

    body.page-co-patri-do-kontajnera .kn-druhy .service-item,
    body.page-co-patri-do-kontajnera .kn-druhy .service-content {
        display: block;
    }

    body.page-co-patri-do-kontajnera .kn-druhy .service-icon {
        width: 56px;
        height: 56px;
    }

    body.page-co-patri-do-kontajnera .kn-druhy .service-icon i {
        font-size: 24px;
    }

    body.page-co-patri-do-kontajnera .kn-druhy .service-content {
        margin-top: 10px;
    }

    body.page-co-patri-do-kontajnera .feature-item {
        margin-top: 10px;
        padding-left: 0;
    }

    body.page-co-patri-do-kontajnera .feature-content h3,
    body.page-co-patri-do-kontajnera .feature-content p {
        color: var(--color-dark);
    }

    body.page-co-patri-do-kontajnera .feature-icon {
        width: 64px;
        height: 64px;
        line-height: 44px;
        margin: 0 0 0 12px;
        border-width: 0;
    }

    body.page-co-patri-do-kontajnera .feature-icon i {
        font-size: 24px;
        line-height: 64px;
    }
}

/* ===== Stránka: faq (body.page-faq) ===== */
/* ==========================================================================
   kontajnernaodpad.sk - FAQ (WEBSTATIC/templates/sk/faq.php)
   Všetky pravidlá s prefixom body.page-faq - platia iba na tejto stránke.
   Moduly: kitová .faq-area (style.css kap. 44) - ľavý stĺpec .faq-content, vpravo .accordion.
   ========================================================================== */


/* --- Hlavička podstránky: fotka L13 (Iveco s vaňovým kontajnerom z profilu), pripravená v Etape B --- */
body.page-faq .site-breadcrumb {
    background-image: url(../img/obsah/hlavicka-faq.jpg);
}


/* --- Ľavý stĺpec (kitový .faq-content): štítok, H2, perex, telefón, tlačidlo.
   Na desktope ostáva pri rolovaní 28 otázok na mieste (sticky pod fixnou navigáciou, ktorá má po
   zrolovaní cca 90 px). Iba pri dostatočne vysokom okne - inak by spodok stĺpca nebolo vidno. --- */
body.page-faq .faq-area .faq-content .kn-faq-perex {
    margin-bottom: 28px;
}

/* telefón: prvá sekcia pod hlavičkou s menším odsadením (kit py-100), tlačidlo objednávky vyššie */
@media all and (max-width: 575px) {
    body.page-faq .faq-area {
        padding-top: 50px;
    }
}

@media all and (min-width: 992px) {
    body.page-faq .faq-area .faq-content {
        padding-right: 20px;
    }
}

@media all and (min-width: 992px) and (min-height: 700px) {
    body.page-faq .faq-area .faq-content {
        position: sticky;
        top: 125px;
    }
}

/* telefón: kitový .call-wrap z navigácie (ikona v žltom kruhu + číslo) na svetlej ploche;
   tvar rohov ako karty akordeónu (40 40 40 0) */
body.page-faq .kn-faq-call {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
    padding: 20px 24px;
    border-radius: 30px 30px 30px 0;
    background: var(--theme-bg-light);
}

body.page-faq .kn-faq-call .icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    line-height: 56px;
    border-radius: 50px;
    background: var(--theme-color);
    color: var(--color-white);
    text-align: center;
    font-size: 22px;
}

/* popisy tmavé: sivá kitová #757F95 na #F6F6F6 má iba 3,7:1 */
body.page-faq .kn-faq-call .content > span {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-dark);
}

body.page-faq .kn-faq-call .kn-faq-call-num {
    margin: 2px 0 3px;
    line-height: 1.25;
}

body.page-faq .kn-faq-call .kn-faq-call-num a {
    color: var(--color-dark);
    font-family: var(--heading-font);
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
}

body.page-faq .kn-faq-call .kn-faq-call-num a:hover {
    color: var(--theme-color2);
}


/* --- Akordeón otázok (kitový .faq-area .accordion). Otázky sú h3 (kit h2), štýl je na .accordion-button.
   Otvorená otázka: kit ju farbí žltou (#fcb400 na bielej = 1,8:1) - tu petrolejová, žltá ostáva
   na čiarkovanej linke, ikone a šípke. 28 dlhých slovenských otázok: písmo 18 px (kit 20 px) a menšia
   medzera medzi kartami (kit 30 px). --- */
body.page-faq .faq-area .accordion-item {
    margin-bottom: 20px;
}

body.page-faq .faq-area .accordion-item:last-child {
    margin-bottom: 0;
}

/* column-gap: šípka (::after, margin-left auto) sa inak dotýka konca dlhej otázky na mobile;
   medzera ikona - text ostáva 15 px ako v kite (3 px okraj + 12 px gap) */
body.page-faq .faq-area .accordion-item .accordion-button {
    column-gap: 12px;
    padding: 16px 24px 16px 20px;
    border-radius: 40px 40px 40px 0;
    font-size: 18px;
    line-height: 1.4;
}

body.page-faq .faq-area .accordion-item .accordion-button:not(.collapsed) {
    color: var(--theme-color2);
    border-radius: 40px 40px 0 0;
}

body.page-faq .faq-area .accordion-button span {
    flex: 0 0 45px;
    margin-right: 3px;
}

/* klávesnica: Bootstrap dáva .accordion-button:focus outline 0 a kit box-shadow none - fokus by nebolo vidno */
body.page-faq .faq-area .accordion-item .accordion-button:focus-visible {
    outline: 3px solid var(--kn-focus);
    outline-offset: -3px;
}

/* odpoveď zarovnaná pod text otázky (za ikonou 45 px + 15 px), HTML z admina p-k */
body.page-faq .faq-area .accordion-body {
    padding: 16px 28px 22px 80px;
    line-height: 1.75;
}

body.page-faq .faq-area .accordion-body p {
    margin: 0 0 12px;
}

body.page-faq .faq-area .accordion-body > :last-child {
    margin-bottom: 0;
}

/* odkazy v odpovediach: kit má a { display: inline-block } (dlhý odkaz by sa nezalomil s textom; za inline-block
   smie riadok zlomiť, takže „?“ alebo „.“ za odkazom skončí na začiatku ďalšieho riadka - aj 404, Čo patrí)
   a hover modrý; tu podčiarknuté petrolejové v riadku textu */
body.page-faq .faq-area .accordion-body a {
    display: inline;
    color: var(--theme-color2);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.page-faq .faq-area .accordion-body a:hover {
    color: var(--color-dark);
}

/* zoznamy v odpovediach (admin p-k ich môže pridať; kit má li { list-style: none }) */
body.page-faq .faq-area .accordion-body ul,
body.page-faq .faq-area .accordion-body ol {
    margin: 0 0 12px;
    padding-left: 1.3em;
}

body.page-faq .faq-area .accordion-body ul li {
    list-style: disc;
}

body.page-faq .faq-area .accordion-body ol li {
    list-style: decimal;
}

body.page-faq .faq-area .accordion-body h4,
body.page-faq .faq-area .accordion-body h5,
body.page-faq .faq-area .accordion-body h6 {
    margin: 4px 0 8px;
    font-size: 17px;
}

@media all and (max-width: 991px) {
    body.page-faq .faq-area .accordion-item .accordion-button {
        font-size: 16px;
    }
}

@media all and (max-width: 575px) {
    body.page-faq .faq-area .accordion-item .accordion-button {
        padding: 14px 18px 14px 14px;
    }

    body.page-faq .faq-area .accordion-button span {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        margin-right: 0;
    }

    body.page-faq .faq-area .accordion-button span i {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

    body.page-faq .faq-area .accordion-body {
        padding: 14px 20px 20px;
    }

    body.page-faq .kn-faq-call {
        padding: 18px;
    }

    body.page-faq .kn-faq-call .kn-faq-call-num a {
        font-size: 22px;
    }
}

/* ===== Stránka: kontakt (body.page-kontakt) ===== */
/* ==========================================================================
   kontajnernaodpad.sk - Kontakt (WEBSTATIC/templates/sk/kontakt.php)
   Všetky pravidlá s prefixom body.page-kontakt - platia iba na tejto stránke.

   Rytmus: hlavička (tmavá) -> perex + 2 tlačidlá (biela) -> kontaktné údaje, 4 karty (biela) ->
   prevádzky z DB p-k (.bg, biele karty s mapou) -> formulár s fotkou + fakturačné údaje (biela) -> pätička.

   Obsah:
   01 Hlavička podstránky - fotka budovy P + K (pripravená v Etape B)
   02 Perex: odkaz s telefónom v texte, dve tlačidlá
   03 Kontaktné údaje - kitové .contact-info (4 karty, dispečing zvýraznený)
   04 Prevádzky z DB p-k - mapa v slote .contact-img + karta (.kn-prevadzka), záložný blok
   05 Formulár - kitový .contact-form-wrap (fotka + .contact-form) a modul mod_kontakt_form
   06 Fakturačné údaje
   ========================================================================== */


/* --- 01 Hlavička podstránky: A01 budova P + K so žltým pruhom a logom (1920x560, pod prekrytím 80 %) --- */
body.page-kontakt .site-breadcrumb {
    background-image: url(../img/obsah/hlavicka-kontakt.jpg);
}


/* --- 02 Perex: telefón v texte ako v .kn-perex-tel (tmavý, podčiarknutý), dve tlačidlá vedľa seba --- */
body.page-kontakt .kn-lead a {
    color: var(--color-dark);
    text-decoration: underline;
    text-decoration-color: rgba(0, 44, 91, .35);
    text-underline-offset: 4px;
}

body.page-kontakt .kn-lead a:hover {
    color: var(--theme-color2);
    text-decoration-color: currentColor;
}


/* --- 03 Kontaktné údaje: 4 kitové .contact-info - vzhľad kariet je spoločný (sekcia 17). Dispečing = hlavný
   kanál objednávky: petrolejová karta (.kn-kontakt-hlavny). --- */

/* zvýraznená karta dispečingu: petrolejová plocha (theme-color2), biely text, žltý kruh ikony ostáva */
body.page-kontakt .kn-kontakt-udaje .contact-info.kn-kontakt-hlavny {
    background: var(--theme-color2);
    box-shadow: 0 18px 40px -18px rgba(8, 80, 122, .55);
}

body.page-kontakt .kn-kontakt-udaje .contact-info.kn-kontakt-hlavny .content h3,
body.page-kontakt .kn-kontakt-udaje .contact-info.kn-kontakt-hlavny .content > p:not(.kn-kontakt-pozn) > a {
    color: var(--color-white);
}

body.page-kontakt .kn-kontakt-udaje .contact-info.kn-kontakt-hlavny .content > p:not(.kn-kontakt-pozn) > a {
    font-size: 22px;
}

body.page-kontakt .kn-kontakt-udaje .contact-info.kn-kontakt-hlavny .content > p:not(.kn-kontakt-pozn) > a:hover {
    color: var(--theme-color);
}

body.page-kontakt .kn-kontakt-udaje .contact-info.kn-kontakt-hlavny .kn-kontakt-pozn {
    color: rgba(255, 255, 255, .86);
}

body.page-kontakt .kn-kontakt-hlavny a:focus-visible {
    outline-color: var(--theme-color);
}


/* --- 04 Prevádzky z DB p-k (sekcia .bg). Centrála: mapa v kitovom slote .contact-img (zaoblenie 40 px ako
   kitový obrázok) vedľa bielej karty. Ostatné prevádzky: biela karta s mapou hore. Mapa = iframe z pk_mapa()
   (OpenStreetMap, loading="lazy"); sivé pozadie slotu, kým sa mapa nenačíta. --- */
body.page-kontakt .kn-prevadzky .site-heading p {
    font-size: 17px;
}

body.page-kontakt .kn-mapa {
    position: relative;
    overflow: hidden;
    background: #E4E9EE;
}

body.page-kontakt .kn-mapa iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Dotyk (telefón, tablet): mapa OSM sa posúva jedným prstom - ťah, ktorý začne na mape (karty majú mapu cez celú
   šírku), by posúval mapu namiesto stránky. Na dotykovom zariadení je mapa náhľad; trasu otvorí odkaz
   „Naplánovať trasu“ pri každej prevádzke. Klávesnicou ostáva mapa ovládateľná. */
@media (pointer: coarse) {
    body.page-kontakt .kn-mapa iframe {
        pointer-events: none;
    }
}

body.page-kontakt .kn-prevadzka-hlavna .kn-mapa {
    height: 100%;
    min-height: 400px;
    border-radius: 40px;
    box-shadow: var(--box-shadow);
}

body.page-kontakt .kn-prevadzka {
    height: 100%;
    padding: 40px 42px;
    border-radius: 40px;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
}

body.page-kontakt .kn-prevadzka h3 {
    margin-bottom: 10px;
    color: var(--color-dark);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}

body.page-kontakt .kn-prevadzka-stitok {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 5px 14px;
    border-radius: 50px;
    background: var(--theme-color);
    color: var(--color-dark);
    font-family: var(--heading-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

body.page-kontakt .kn-prevadzka-adresa {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-info-color);
    color: var(--color-dark);
    font-size: 17px;
    font-weight: 500;
}

body.page-kontakt .kn-prevadzka-adresa i {
    margin-top: 5px;
    color: var(--theme-color2);
}

/* HTML z admina p-k (strong, em, p, br, odkazy tel:) - kompaktné riadky, odkazy tmavé a podčiarknuté */
body.page-kontakt .kn-prevadzka-text {
    color: var(--body-text-color);
    font-size: 15px;
    line-height: 1.7;
}

body.page-kontakt .kn-prevadzka-text p {
    margin: 0 0 10px;
}

body.page-kontakt .kn-prevadzka-text strong {
    color: var(--color-dark);
    font-weight: 600;
}

body.page-kontakt .kn-prevadzka-text em {
    font-style: normal;
}

body.page-kontakt .kn-prevadzka-text a {
    color: var(--color-dark);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: rgba(0, 44, 91, .25);
    text-underline-offset: 3px;
}

body.page-kontakt .kn-prevadzka-text a:hover {
    color: var(--theme-color2);
    text-decoration-color: currentColor;
}

body.page-kontakt .kn-prevadzka-trasa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--theme-color2);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(8, 80, 122, .35);
    text-underline-offset: 4px;
}

body.page-kontakt .kn-prevadzka-trasa:hover {
    color: var(--color-dark);
    text-decoration-color: currentColor;
}

body.page-kontakt .kn-prevadzka-trasa i {
    font-size: 14px;
}

/* dotykové obrazovky: samostatný odkaz vysoký aspoň 44 px (inak 29 px) */
@media all and (max-width: 991px) {
    body.page-kontakt .kn-prevadzka-trasa {
        min-height: 44px;
    }
}

/* ostatné prevádzky: mapa hore cez celú šírku karty, text pod ňou */
body.page-kontakt .kn-prevadzky-dalsie {
    margin-top: 0;
    padding-top: 24px;
}

body.page-kontakt .kn-prevadzka.kn-prevadzka-karta {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

body.page-kontakt .kn-prevadzka-karta .kn-mapa {
    flex: 0 0 auto;
    height: 260px;
}

body.page-kontakt .kn-prevadzka-karta .kn-prevadzka-telo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 32px 36px 34px;
}

/* odkaz „Naplánovať trasu“ na spodku karty - v kartách vedľa seba (rôzne dlhý text z DB) je v jednej línii */
body.page-kontakt .kn-prevadzka-karta .kn-prevadzka-text {
    margin-bottom: 14px;
}

body.page-kontakt .kn-prevadzka-karta .kn-prevadzka-trasa {
    align-self: flex-start;
    margin-top: auto;
}

/* záložný blok pri výpadku DB p-k bez cache (statická centrála) */
body.page-kontakt .kn-prevadzka-zaloha {
    height: auto;
}

body.page-kontakt .kn-prevadzka-zaloha + .kn-fallback {
    margin-top: 24px;
    background: var(--color-white);
}


/* --- 05 Formulár: kitový .contact-form-wrap - fotka (vlastná fotka P + K, L03, 445x675) vyplní výšku karty
   formulára: obrázok je v slote absolútne (object-fit: cover), takže výšku riadku určuje iba formulár
   (aj keď narastie o chybové hlášky) a fotka nenaťahuje kartu formulára. Svetlá karta .contact-form.
   Nadpis h2 27 px ako nadpisy sekcií (kit 30 px, objednávkový formulár má tiež 27 px). Pod 992 px sa fotka
   nezobrazuje - formulár je hneď pod kontaktmi a nič ho neodsúva nadol. --- */
body.page-kontakt .contact-img {
    height: 100%;
}

body.page-kontakt .kn-napiste .contact-img {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    border-radius: 40px;
}

body.page-kontakt .kn-napiste .contact-img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 50%;
}

body.page-kontakt .contact-form {
    height: 100%;
    padding: 40px 40px 36px;
}

body.page-kontakt .contact-form-header {
    margin-bottom: 26px;
}

body.page-kontakt .contact-form-header p {
    margin: 0;
    line-height: 1.7;
}

body.page-kontakt .contact-form-header p a {
    color: var(--theme-color2);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(8, 80, 122, .35);
    text-underline-offset: 3px;
}

body.page-kontakt .contact-form-header p a:hover {
    color: var(--color-dark);
    text-decoration-color: currentColor;
}

/* polia na svetlej karte: biele (kit ich má biele aj v kontakte) */
body.page-kontakt .kn-kontakt-form .form-control {
    background: var(--color-white);
}

body.page-kontakt .kn-kontakt-form textarea.form-control {
    min-height: 150px;
}


/* --- 06 Fakturačné údaje: riadok textu v svetlom ráme pod formulárom (04-obsah 1.8 S4) --- */
body.page-kontakt .kn-fakturacne {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
    padding: 24px 30px;
    border: 1px solid var(--border-info-color);
    border-radius: 30px;
}

body.page-kontakt .kn-fakturacne .icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 50px;
    background: var(--theme-bg-light);
    color: var(--theme-color2);
    font-size: 22px;
    line-height: 54px;
    text-align: center;
}

body.page-kontakt .kn-fakturacne p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

body.page-kontakt .kn-fakturacne strong {
    color: var(--color-dark);
    font-weight: 600;
}


/* --- Responzivita --- */
@media all and (max-width: 991px) {
    body.page-kontakt .kn-prevadzka-hlavna .kn-mapa {
        height: 340px;
        min-height: 0;
    }

    body.page-kontakt .contact-form {
        padding: 34px 28px 30px;
    }
}

@media all and (max-width: 575px) {
    body.page-kontakt .kn-prevadzka {
        padding: 30px 24px;
        border-radius: 30px;
    }

    body.page-kontakt .kn-prevadzka-hlavna .kn-mapa {
        height: 280px;
        border-radius: 30px;
    }

    body.page-kontakt .kn-prevadzka-karta .kn-mapa {
        height: 220px;
    }

    body.page-kontakt .kn-prevadzka-karta .kn-prevadzka-telo {
        padding: 26px 24px 28px;
    }

    body.page-kontakt .kn-prevadzka h3 {
        font-size: 19px;
    }

    body.page-kontakt .contact-form {
        padding: 28px 20px 26px;
        border-radius: 30px;
    }

    body.page-kontakt .contact-form-header h2 {
        font-size: 24px;
    }

    body.page-kontakt .kn-fakturacne {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 22px 22px;
        border-radius: 25px;
    }
}