/* =============================================================================
   AutoŽilina — návrh domovskej stránky (autocentrum)
   -----------------------------------------------------------------------------
   Vychádza z existujúceho styles/main.css: rovnaká paleta, Poppins 300/600,
   pilulkové tlačidlá, karty s modrým tieňom, tmavé sekcie #1D1D1F.
   Cieľom je úprava, nie redesign — návštevník má poznať ten istý web,
   len s novým usporiadaním a dôrazom na služby.

   Nové proti pôvodnému CSS je len to, čo si vyžaduje nová štruktúra:
   mriežka služieb, promo blok požičovne a zvýraznenie najbližšieho termínu.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
    /* -------------------------------------------------------------------------
       Farby textu spĺňajú WCAG AA (kontrast 4,5:1 pre bežný text).

       Pôvodné hodnoty z main.css to nespĺňali a týkalo sa to najdôležitejších
       prvkov: biely text na modrom tlačidle mal 4,05, odznak „Najbližšie dnes"
       len 3,09. Odtiene sú preto o kúsok tmavšie — natoľko, aby prešli aj na
       bielej aj na --slight, a nie viac. Značka zostáva rovnaká.

       Pri zmene ktorejkoľvek hodnoty prepočíta pomery ContrastTest.
       ---------------------------------------------------------------------- */
    --black:    #18191A;
    --dark:     #1D1D1F;
    --primary:  #006DE0;   /* bolo #007AFC — 4,05 na bielej */
    --sdark:    #717172;   /* bolo #7C7C7D — 4,17 na bielej, 3,85 na --slight */
    --smedium:  #CFCFD1;   /* len rámčeky a čiary, na text sa nepoužíva */
    --sdisabled:#949496;   /* text, na ktorý sa nedá kliknúť — obsadený deň */
    --swhite:   #FFFFFF;
    --slight:   #F5F6F7;
    --error:    #E30000;   /* bolo #F20000 — 4,40 na bielej */
    --gradprim: linear-gradient(to bottom right, #006DE0, #003C7D);

    /* Sekundárny text na tmavom pozadí. Jedna hodnota nestačí na obe strany:
       --sdark je na tmavom pozadí 4,04, a keby sa zosvetlil, prestal by
       stačiť na bielom. Preto samostatný odtieň — pata a omrvinky. */
    --sdark-on-dark: #9A9A9C;

    /* Tmavší odtieň značky na prejdenie myšou. Ako premenná preto, aby sa pri
       zmene --primary nezabudlo aj na hover — predtým bol natvrdo a po
       stmavnutí základnej farby by bol takmer nerozoznateľný. */
    --primary-dark: #0061C9;

    /* Značka na tmavom pozadí. Tmavá modrá, ktorá sedí na bielej, má na
       tmavom len 3,42 — a zosvetliť samotnú --primary nejde, lebo je aj
       podkladom tlačidiel s bielym textom. Preto druhý odtieň, rovnako ako
       pri sekundárnom texte. Používa sa LEN na text, nie na plochy. */
    --primary-on-dark: #1A8CFF;

    /* Nové: jemné plochy pre odznaky termínov */
    --okbg:     #E6F6EC;
    /* Stav „čakáme na potvrdenie" — žiadosť o prenájom. Ikona, nie text,
       preto stačí 3:1 (3,39). */
    --waitbg:   #FEF6E7;
    --wait:     #B7791F;
    --ok:       #187E42;   /* bolo #1E9E52 — 3,09 na --okbg */

    /* -------------------------------------------------------------------------
       Šírky obsahu — jediné miesto, kde sa menia.
       --wrap je obsahový stĺpec; 1040 px je prevzaté z pôvodného webu.
       --gutter je bočný okraj, kým sa stĺpec na obrazovku nezmestí.
       Úzke stĺpce sú na text a formuláre, kde by 1040 bolo na čítanie priveľa.
       ---------------------------------------------------------------------- */
    --wrap:        1040px;
    --wrap-narrow:  648px;  /* formuláre, cenník, technické údaje, FAQ, právne texty */
    --wrap-lead:    560px;  /* podnadpis sekcie */
    --gutter:        16px;
}

@media (min-width: 768px) {
    :root { --gutter: 40px; }
}

* { box-sizing: border-box; }

/* Preskakovací odkaz — pre myš neviditeľný, pri prechode klávesnicou vyjde
   zhora. Neskrýva sa cez display:none, to by ho vyradilo aj z poradia. */
.skip-link {
    position: absolute;
    top: -60px; left: 16px;
    z-index: 100;
    padding: 10px 18px;
    border-radius: 0 0 10px 10px;
    background: var(--primary);
    color: var(--swhite);
    font-size: 15px;
    font-weight: 600;
    transition: top .15s;
}
.skip-link:focus { top: 0; }

/* Nadpis, ktorý potrebuje čítačka obrazovky, ale v návrhu preň nie je miesto.
   Nepoužíva display:none ani visibility:hidden — tie ho vyradia aj z čítania. */
.len-pre-citacku {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

body {
    background: var(--swhite);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-size: 16px;
    color: var(--black);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    -webkit-text-size-adjust: none;
}

img { display: block; margin: 0; padding: 0; }
a { border: none; color: var(--primary); text-decoration: none; }
a:hover { cursor: pointer; }

h1 { font-size: 36px; line-height: 1.2; font-weight: 600; margin: 0 0 16px; }
h2 { font-size: 28px; line-height: 1.2; font-weight: 600; margin: 0 0 16px; }
h3 { font-size: 24px; line-height: 1.2; font-weight: 600; margin: 0 0 16px; }
h4 { font-size: 20px; line-height: 1.2; font-weight: 600; margin: 0 0 16px; }
p  { font-size: 16px; line-height: 1.5; margin: 0 0 8px; }

.blue  { color: var(--primary); }
.desk  { display: none; }
.mob   { display: block; }
.clr   { clear: both; width: 100%; height: 0; }

/* --- tlačidlá: pilulky ako doteraz -------------------------------------- */
.btn-prim {
    display: inline-block;
    padding: 10px 24px;
    background: var(--primary);
    color: var(--swhite);
    border: 1px solid var(--primary);
    font-size: 16px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
}
.btn-prim:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.btn-ter {
    display: inline-block;
    padding: 10px 24px;
    background: none;
    color: var(--black);
    border: 1px solid var(--black);
    font-size: 16px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
}
.btn-ter:hover { background: var(--primary); color: var(--swhite); border-color: var(--primary); }

.btn-light {
    display: inline-block;
    padding: 10px 24px;
    background: none;
    color: var(--swhite);
    border: 1px solid rgba(255, 255, 255, .5);
    font-size: 16px;
    font-weight: 600;
    border-radius: 999px;
}
.btn-light:hover { background: var(--swhite); color: var(--black); border-color: var(--swhite); }

/* `flow-root` namiesto `overflow: hidden`: oboje uzavrie plávajúce prvky
   dovnútra, ale `hidden` navyše oreže všetko, čo zo sekcie vystupuje — a na
   detaile auta má fotka vystupovať hore z pásu so základnými údajmi. */
.section { display: flow-root; }
.section .shdl { margin: 0; padding: 48px 0 0; text-align: center; }
.section .shdl h2 { margin: 0 0 16px; }
.section .shdl p  { margin: 0 auto 24px; max-width: var(--wrap-lead); color: var(--sdark); }

/* =============================================================================
   Obsahový stĺpec
   -----------------------------------------------------------------------------
   Jedna šírka pre celý web. Predtým mal každý blok vlastnú: hlavička a služby
   držali 1180 px, štyri bloky 1040, zoznam áut 992 a zvyšok sa roztiahol na
   celé okno. Na širokej obrazovke sa preto sekcie viditeľne rozchádzali.

   Vzorec nepotrebuje breakpoint: kým je okno užšie než stĺpec plus okraje,
   drží sa okraja; nad tým sa stĺpec zastaví na --wrap a vycentruje.

   Odsadenie patrí na VONKAJŠÍ blok, nie na jeho obsah — pozadie sekcie tak ide
   naďalej cez celé okno a zalomí sa len obsah. Pozadie sa odsadením neposunie
   (background-origin je padding-box a bez rámčeka je to celý blok), takže
   ilustrácia v hlavičke zostáva prilepená na okraj okna. Overené v prehliadači.

   Nová sekcia stačí, ak dostane triedu .wrap-x — alebo ju pridaj sem. Že na to
   nikto nezabudol, kontroluje LayoutTest.
   ========================================================================== */
.wrap-x,
#promo-bar .wrap,
#headingHP, #heading,
#services #hdlwrap, #services #cards,
#how, #why, #rental, #faq, #contact, footer,
#why-svc, #svc-price, #svc-why, #svc-contact, #other, #booking,
#listing, #rent-why,
#mainparam, #tech, #cennik, #benefit, #more-cars,
#terms {
    padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
}

/* =============================================================================
   Hlavička a hero
   -----------------------------------------------------------------------------
   Tmavý blok s ilustráciou vpravo dole zostáva — je to najviac rozpoznateľný
   prvok webu. Mení sa text a pribúda dvojica tlačidiel.
   ========================================================================== */
#headingHP {
    /* Dve vrstvy: tmavý závoj zhora nad ilustráciou, aby bol text čitateľný
       aj tam, kde sa s autom prekrýva. Pôvodné hero malo menej obsahu,
       takže sa to nedialo. */
    background:
        linear-gradient(180deg, var(--dark) 0%, var(--dark) 58%, rgba(29,29,31,.88) 78%, rgba(29,29,31,.35) 100%),
        url('/assets/img/illustrationHP.webp') no-repeat bottom right / 260px 350px,
        var(--dark);
    color: var(--swhite);
    min-height: 660px;
    position: relative;
}

header { padding-block: 24px; overflow: hidden; position: relative; }
header #logo { float: left; }
header #logo img { width: auto; height: 24px; }

header #wrap { float: right; display: flex; align-items: center; gap: 12px; height: 24px; }
header #wrap #callus { color: var(--swhite); font-weight: 600; font-size: 15px; white-space: nowrap; }
/* Jediný obrázok na webe bez pevnej veľkosti v CSS — bez nej si prehliadač
   pred načítaním nerezervuje miesto a hlavička pri načítaní poskočí. */
header #wrap .break { display: none; }
header #wrap .break img { display: block; width: 16px; height: 16px; }
header #wrap #hamburger { width: 24px; height: 24px; cursor: pointer; }

header #menu { display: none; }
header #menu.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 122, 252, .88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
header #menu #mopen { float: right; width: 24px; height: 24px; margin: 24px 24px 0 0; cursor: pointer; }
header #menu ul { margin: 64px 24px; padding: 0; }
header #menu ul li { display: block; width: 100%; list-style: none; }
header #menu ul li a {
    display: block;
    padding: 13px 0;
    text-align: center;
    color: var(--swhite);
    font-size: 20px;
}
/* Požičovňa je posledná v ponuke a oddelená — je to doplnková služba. */
header #menu ul li.divider { border-top: 1px solid rgba(255, 255, 255, .3); margin-top: 12px; padding-top: 12px; }

/* Bez bočného okraja: stĺpec drží hlavička cez `padding-inline`. Keď si ho
   hero pridalo ešte raz, nadpis začínal na mobile 16 px vpravo od loga. */
#hero { margin: 24px 0 0; color: var(--swhite); }
#hero .caption {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-on-dark);
    letter-spacing: .04em;
    text-transform: uppercase;
}
#hero h1 { font-size: 32px; max-width: 340px; margin: 0 0 14px; }

@media (min-width: 400px) {
    #hero h1 { font-size: 36px; }
}
#hero h1 .blue { display: block; }
#hero p { max-width: 340px; color: var(--slight); margin: 0 0 24px; }

#hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }

/* Tri dôvody hneď v hero — čo návštevník získa, bez scrollovania. */
#hero .hero-points {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
}
#hero .hero-points li {
    list-style: none;
    font-size: 14px;
    color: var(--slight);
    display: flex;
    align-items: center;
    gap: 6px;
}
#hero .hero-points li svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--primary); }

/* =============================================================================
   Služby — hlavná sekcia stránky
   -----------------------------------------------------------------------------
   Nahrádza pôvodnú sekciu s autami na prenájom. Rovnaký vzor: tmavá hlavička,
   pod ňou karty na svetlom páse s bg.png.
   ========================================================================== */
#services { margin: 0; padding: 0; }
#services #hdlwrap { background: var(--dark); margin: 0; padding-block: 0 24px; }
#services .shdl h2 { color: var(--swhite); }
#services .shdl p  { color: var(--slight); }

#services #cards { background: var(--slight) url('/assets/img/bg.png') repeat-x; padding-bottom: 40px; }

#services .grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.svc {
    display: flex;
    flex-direction: column;
    background: var(--swhite);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 122, 252, .1);
    overflow: hidden;
    color: var(--black);
}
.svc:hover { box-shadow: 0 8px 24px rgba(0, 122, 252, .22); }

.svc__media {
    position: relative;
    height: 148px;
    background: var(--slight);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.svc__media img { width: auto; height: 132px; }

/* Odznak s najbližším voľným termínom. Toto je najsilnejší argument —
   „zajtra 8:00" presvedčí lepšie než samotné tlačidlo. */
.svc__slot {
    position: absolute;
    top: 12px; left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--okbg);
    color: var(--ok);
    font-size: 12px;
    font-weight: 600;
}
.svc__slot svg { width: 13px; height: 13px; }

.svc__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.svc__body h3 { font-size: 20px; margin: 0 0 8px; }
.svc__body p  { font-size: 14px; color: var(--sdark); margin: 0 0 14px; }

.svc__list { margin: 0 0 18px; padding: 0; }
.svc__list li {
    list-style: none;
    font-size: 13px;
    color: var(--black);
    padding: 0 0 5px 18px;
    position: relative;
}
.svc__list li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.svc__btm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--slight);
}
.svc__price { font-size: 13px; color: var(--sdark); }
.svc__price b { display: block; font-size: 15px; color: var(--black); font-weight: 600; }
.svc__btm .btn-prim { padding: 8px 18px; font-size: 14px; }

/* =============================================================================
   Ako to funguje
   ========================================================================== */
#how { background: var(--swhite); padding-block: 0 48px; }
#how .steps { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 8px 0 0; }
#how .step { text-align: center; }
#how .step .num {
    display: inline-grid;
    place-items: center;
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--swhite);
    box-shadow: 0 8px 24px rgba(0, 122, 252, .14);
    font-size: 20px;
    font-weight: 600;
    color: var(--primary);
}
#how .step h3 { font-size: 18px; margin: 0 0 6px; }
#how .step p  { font-size: 14px; color: var(--sdark); margin: 0; }

/* =============================================================================
   Prečo my
   ========================================================================== */
#why { background: var(--slight); padding-block: 0 48px; }
#why .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 0; }
#why .item {
    background: var(--swhite);
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 122, 252, .08);
}
#why .item img { width: 32px; height: 32px; margin: 0 auto 12px; }
#why .item b { display: block; font-size: 15px; font-weight: 600; margin: 0 0 4px; }
#why .item span { font-size: 13px; color: var(--sdark); line-height: 1.4; }

#why .bonus {
    margin: 24px 16px 0;
    padding: 18px 20px;
    background: var(--swhite);
    border-radius: 16px;
    border-left: 3px solid var(--primary);
    font-size: 14px;
}
#why .bonus b { font-weight: 600; }

/* =============================================================================
   Promo: autopožičovňa
   -----------------------------------------------------------------------------
   Požičovňa je posledná v ponuke a na HP má len promo blok s odkazom na
   vlastnú podstránku. Tmavý blok ju odlíši od servisných služieb bez toho,
   aby vyzerala zanedbaná.
   ========================================================================== */
#rental { background: var(--dark); color: var(--swhite); padding-block: 48px; }
#rental .wrap { margin: 0; }
#rental .caption {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-on-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 10px;
}
#rental h2 { color: var(--swhite); margin: 0 0 12px; }
#rental p  { color: var(--slight); font-size: 15px; margin: 0 0 20px; }

#rental .photo {
    width: 100%;
    height: 200px;
    margin: 0 0 24px;
    border-radius: 16px;
    background: #000 center/cover no-repeat;
    box-shadow: 0 8px 24px rgba(0, 122, 252, .3);
}

#rental .facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 22px; padding: 0; }
#rental .facts li {
    list-style: none;
    font-size: 14px;
    color: var(--slight);
    display: flex;
    align-items: center;
    gap: 6px;
}
#rental .facts li img { width: 18px; height: 18px; filter: brightness(0) invert(1) opacity(.7); }

/* =============================================================================
   FAQ
   ========================================================================== */
#faq { padding-block: 0 48px; }
#faq .list { margin: 8px 16px 0; }
#faq details {
    background: var(--swhite);
    border: 1px solid var(--slight);
    border-radius: 12px;
    margin: 0 0 10px;
    padding: 0;
}
#faq summary {
    padding: 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: '+'; color: var(--primary); font-size: 20px; line-height: 1; }
#faq details[open] summary::after { content: '–'; }
#faq details p { padding: 0 16px 16px; margin: 0; font-size: 14px; color: var(--sdark); }

/* =============================================================================
   Kontakt a pata
   ========================================================================== */
#contact { background: var(--slight); padding-block: 40px; }
#contact .wrap { margin: 0; text-align: center; }
#contact h2 { margin: 0 0 8px; }
#contact p { color: var(--sdark); margin: 0 0 20px; }
#contact .phones { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 520px; margin: 0 auto; }
#contact .phone {
    background: var(--swhite);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(0, 122, 252, .08);
}
#contact .phone span { display: block; font-size: 13px; color: var(--sdark); margin: 0 0 4px; }
#contact .phone a { font-size: 20px; font-weight: 600; }

main { overflow-x: clip; }

footer {
    /* Modrý gradient ako na pôvodnom webe — tmavú pätu mal len tento prototyp.
       Na modrej musí byť všetok text svetlý; značková modrá na odkazoch by
       sa v nej stratila. */
    background: var(--gradprim);
    color: var(--slight);
    padding-block: 40px 32px;
    font-size: 14px;
}
footer .flogo { height: 24px; width: auto; margin: 0 0 16px; }
footer p { color: var(--slight); font-size: 14px; }

/* Telefón a e-mail v päte sú obyčajné odkazy — na tmavom podklade potrebujú
   svetlejší odtieň značky než na bielej. */
footer a { color: var(--swhite); font-weight: 600; }

footer .fnav { margin: 20px 0 0; padding: 0; }
footer .fnav li { list-style: none; padding: 0; }
/* Odkazy mali 20 px na výšku, pod minimom 24 px podľa WCAG 2.2. */
footer .fnav a { display: inline-block; padding: 5px 0; color: var(--slight); font-weight: 300; }
footer .fnav a:hover { color: var(--swhite); text-decoration: underline; }
footer .copy {
    margin: 24px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .28);
    font-size: 12px;
    color: var(--slight);
}

/* =============================================================================
   Väčšie obrazovky
   -----------------------------------------------------------------------------
   Pôvodný web má zlom na 768px a menu sa mení na vodorovné. Zachované.
   ========================================================================== */
@media (min-width: 768px) {
    .desk { display: block; }
    .mob  { display: none; }

    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-block: 24px;
    }
    header #logo, header #wrap { float: none; }
    header #wrap {
        flex: 1 1 auto;
        justify-content: flex-end;
        /* Bez toho by sa flex položka odmietla zmenšiť pod šírku obsahu
           a navigácia by pretiekla von z hlavičky. */
        min-width: 0;
        height: auto;
    }
    header #wrap #callus { font-size: 16px; }

    /* Medzi 768 a 1103 px sa sedem položiek do riadka nezmestí, takže tu
       zostáva hamburger. Tieto prvky majú v šablóne triedu .mob, ktorú
       utilita od 768 px skrýva — preto sa musia vrátiť menom. */
    header #wrap #hamburger,
    header #menu #mopen,
    header #menu ul li.mob { display: block; }

    #headingHP {
        background:
            linear-gradient(100deg, var(--dark) 0%, var(--dark) 46%, rgba(29,29,31,.6) 62%, rgba(29,29,31,.15) 100%),
            url('/assets/img/illustrationHP.webp') no-repeat bottom right / 460px 600px,
            var(--dark);
        min-height: 600px;
    }
    #hero { margin: 40px 0 0; }
    #hero h1 { font-size: 44px; max-width: 560px; }
    #hero h1 .blue { display: inline; }
    #hero p { max-width: 480px; font-size: 17px; }
    #hero .hero-points { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }

    #services .grid { grid-template-columns: repeat(2, 1fr); }
    #services #cards { padding-bottom: 48px; }

    #how .steps { grid-template-columns: repeat(3, 1fr); margin: 8px 0 0; }

    #why .grid { grid-template-columns: repeat(4, 1fr); margin: 8px 0 0; }
    #why .bonus { margin: 24px 0 0; }

    #rental .wrap { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
    #rental .photo { height: 280px; margin: 0; }
    #rental .text { order: -1; }

    #faq .list { margin: 8px auto 0; max-width: var(--wrap-narrow); }

    #contact .phones { grid-template-columns: repeat(2, 1fr); }

    footer { padding-block: 48px 32px; }
    footer .fcols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
    footer .fnav { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; }
}

/* =============================================================================
   Vodorovná navigácia
   -----------------------------------------------------------------------------
   Zapína sa až tam, kde sa sedem položiek do riadka naozaj zmestí. Rovnakú
   hranicu má pôvodný web (1104 px = 1040 obsah + 2×32 okraj).

   Predtým sa menu zapínalo už od 768 px. #wrap bol plávajúci doprava a plávajúci
   blok sa nezmenšuje, takže navigácia pretiekla von z hlavičky a vytlačila
   telefónne číslo mimo obrazovku. Na živom webe to bolo vidieť medzi 768 a
   1100 px.
   ========================================================================== */
@media (min-width: 1104px) {
    header #wrap .break { display: block; }
    header #wrap #hamburger,
    header #menu #mopen,
    header #menu ul li.mob { display: none; }

    header #menu { display: block; }
    header #menu ul { display: flex; align-items: center; gap: 4px; margin: 0; }
    header #menu ul li a { font-size: 15px; padding: 6px 10px; white-space: nowrap; }
    header #menu ul li.divider { border: none; margin: 0 0 0 8px; padding: 0 0 0 12px; border-left: 1px solid rgba(255,255,255,.3); }
    header #menu ul li.divider a { color: var(--primary-on-dark); }
    header #menu ul li a.is-active { color: var(--primary-on-dark); }
}

@media (min-width: 1080px) {
    .section .shdl { padding: 64px 0 0; }
    #services .grid { grid-template-columns: repeat(3, 1fr); }
    #services #cards { padding-bottom: 56px; }
    #hero { margin: 56px 0 0; }
    #headingHP {
        background:
            linear-gradient(100deg, var(--dark) 0%, var(--dark) 48%, rgba(29,29,31,.55) 66%, rgba(29,29,31,.1) 100%),
            url('/assets/img/illustrationHP.webp') no-repeat bottom right / 600px 720px,
            var(--dark);
        min-height: 640px;
    }
}

/* =============================================================================
   Promo pás — sezónne, nastaviteľné v admine
   -----------------------------------------------------------------------------
   Jedna lišta nad hlavičkou, rovnaká na mobile aj na desktope. Do 25. 9. 2026
   bola na mobile prilepená naspodku obrazovky; tam ale brala 63 px výšky
   telefónu natrvalo a pobila by sa s rezervačnou lištou. Hore odroluje
   s obsahom a nikomu nezavadzia.

   Prevádzka má sezóny, takže obsah sa mení bez zásahu do kódu.
   ========================================================================== */
#promo-bar {
    background: var(--primary);
    color: var(--swhite);
    font-size: 14px;
}

/* Zavreté promo. Triedu nasadzuje skript v hlavičke ešte pred vykreslením
   tela, takže lišta sa ani nemihne; `hidden` je stav hneď po kliknutí. */
.promo-off #promo-bar,
#promo-bar[hidden] { display: none; }

#promo-bar .wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-block: 8px;
    margin: 0 auto;
}

/* Celý pás je jeden odkaz — na telefóne je cieľom celý riadok, nie tlačidlo. */
#promo-bar .go {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px 10px;
    min-height: 28px;
    color: var(--swhite);
    text-decoration: none;
}
#promo-bar b { font-weight: 600; }
#promo-bar .cta {
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
#promo-bar .slot {
    padding: 2px 10px;
    border-radius: 999px;
    /* Svetlejšia podložka (biela na 18 %) dáva bielemu textu len 3,67 : 1.
       Tmavšia ho naopak od modrej odlíši a vyjde 6,66 : 1. */
    background: rgba(0, 0, 0, .18);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Na telefóne sa do riadku zmestí nadpis a výzva, nič viac. Podrobnosti
   a najbližší termín pribudnú až tam, kde je na ne miesto. */
#promo-bar .txt,
#promo-bar .slot { display: none; }

#promo-bar .promo-x {
    /* Bez JavaScriptu by krížik nič nespravil, tak sa ani neukáže. */
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--swhite);
    cursor: pointer;
}
.js-on #promo-bar .promo-x { display: flex; }
#promo-bar .promo-x:hover { background: rgba(0, 0, 0, .18); }

/* Odznak s termínom sa zmestí od tabletu. Podrobný text až tam, kde ho riadok
   uživí — pri 768 px sa lišta kvôli nemu lámala na dva riadky a mala 63 px. */
@media (min-width: 768px) {
    #promo-bar .slot { display: inline-block; }
}

@media (min-width: 1104px) {
    #promo-bar .txt { display: inline; }
}

/* =============================================================================
   Rozloženie s pravou lištou
   -----------------------------------------------------------------------------
   Obsah v ľavom stĺpci 648 px, rezervácia v pravej lište 360 px, medzi nimi
   32 px — spolu 1040, teda presne naše `--wrap`. Tú istú mriežku mal pôvodný
   web (648 + 393); rozdiel je, že tu ju drží grid a nie float, takže sa dá
   lišta prilepiť pri rolovaní.

   V DOM je lišta MEDZI dvoma polovicami obsahu. Pod 1104 px sa mriežka vypne
   a poradie zostane presne také, aké bolo predtým — formulár na svojom mieste
   v texte. Žiadne preskupovanie cez `order` netreba a čítačka obrazovky číta
   to isté, čo je vidieť.

   Zlom je 1120 px, nie 768. Je to najmenšia šírka, pri ktorej sa 1040 zmestí
   aj s bočnou medzerou 40 px (1040 + 2 × 40). Hlavička sa láme o kúsok skôr,
   pri 1104 — keby sa mriežka riadila ňou, karta by medzi 1104 a 1120 px
   trčala 16 px za pravý okraj obsahu.
   ========================================================================== */
@media (min-width: 1120px) {
    .rail {
        display: grid;
        grid-template-columns: var(--wrap-narrow) 360px;
        column-gap: 32px;
        align-items: start;
        padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
    }

    /* Bez min-width by sa stĺpec odmietol zmenšiť pod šírku svojho obsahu
       (predvolené `min-width: auto`) a mriežka by pretiekla von. */
    .rail__main { grid-column: 1; min-width: 0; }

    /* Lišta má vlastný stĺpec cez všetky riadky, ale je vysoká len na svoj
       obsah — až vďaka tomu má `sticky` v tej ploche kam kĺzať. */
    .rail__side {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: start;
        position: sticky;
        top: 16px;
    }

    /* Šírku drží mriežka; keby si ju sekcie počítali ešte raz podľa `--wrap`,
       pridali by si vnútri stĺpca 40 px po stranách.
       Vypína sa to premennými, nie ďalším pravidlom: vzorec v obsahovom
       stĺpci je `max(var(--gutter), (100% - var(--wrap)) / 2)`, takže pri
       `--wrap: 100%` a nulovej medzere vyjde nula. Prebiť ho selektorom by
       nešlo — sekcie sú adresované cez id a to má vyššiu váhu než trieda. */
    .rail__main,
    .rail__side {
        --wrap: 100%;
        --gutter: 0px;
    }

    /* Sivý pás so základnými údajmi ide cez celé okno, aj keď je vnútri
       648 px stĺpca. Roztiahne ho podvrstva — široký pruh vycentrovaný na
       pás a odsunutý dozadu. Presah do strán zotne `overflow-x: clip` na
       <main>; `clip` (na rozdiel od `hidden`) nerobí z prvku rolovaciu
       plochu, takže prilepená karta funguje ďalej.

       Vnútorné odsadenie tu byť nesmie — fotka musí byť presne taká široká
       ako stĺpec, inak polovica jej výšky nesedí so zdvihom karty. */
    .rail__main > #mainparam { position: relative; }

    .rail__main > #mainparam::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 300vw;
        transform: translateX(-50%);
        background: var(--slight);
        z-index: -1;
    }

    /* Výbava zostáva kartou — nie je to pás na celú šírku. */
    .rail__main > #why {
        padding-inline: 24px;
        border-radius: 16px;
    }

    /* Lišta sa dvíha do tmavej hlavičky, ako to má pôvodný web na detaile
       auta. `--rail-lift` je výška, o ktorú sa dvihne; nastavuje si ju každá
       stránka sama podľa toho, aká vysoká je jej hlavička.

       Dvíha sa celá mriežka a ľavý stĺpec sa vráti späť vnútorným odsadením.
       Obsah tak zostane, kde bol, a hore vyjde len lišta. */
    .rail {
        position: relative;   /* aby karta prekryla tmavé pozadie nad sebou */
        /* Vlastný vrstvový kontext: podvrstva sivého pásu má `z-index: -1`
           a bez tohto by sa prepadla až za biele pozadie stránky. */
        isolation: isolate;
        margin-top: calc(-1 * var(--rail-lift, 0px));
    }

    /* Koľko sa dvihnúť: `--rail-lift` je vzdialenosť vrchu karty od SPODNEJ
       hrany tmavej hlavičky. Meria sa od spodku zámerne — nadpis môže byť
       raz na riadok, raz na dva a karta by inak poskakovala.

       Detail auta: karta začína tam, kde fotka, teda o jej výšku vyššie.
       Fotka je široká 648 v pomere 4:3 = 486 px, plus 40 px spodného
       okraja — spolu 526.

       Podstránka služby: karta začína pri riadku s údajmi o službe. Ten je
       tesne nad koncom hlavičky, tak hlavička dostane 120 px navyše, aby
       za vrchom karty bol poriadny tmavý pás a nie dvadsaťpixelový prúžok.
       Tie dve čísla patria k sebe: 120 px výplne + 61 px k údajom = 181. */

    .rail--svc {
        --rail-lift: 93px;
    }
    /* Karta začína tam, kde fotka — a tá vystupuje nad sivý pás o polovicu
       svojej výšky. Stĺpec má 648 px, pomer strán 4 : 3, teda 486 / 2 = 243.
       Je to to isté, čo robí `margin-top: -37.5%` na fotke; tu sa to percentom
       zapísať nedá, okraj mriežky by sa počítal z inej šírky. */
    .rail--car {
        --rail-lift: 243px;
    }

    /* Nadpis ide cez celú šírku obsahu, fotka až pod ním drží ľavý stĺpec —
       vedľa nej začína karta. Rovnako to má pôvodný web. */
    #car-photo { max-width: var(--wrap-narrow); }

    .rail__main:first-of-type { padding-top: var(--rail-lift, 0px); }

    /* Na tmavom podklade musí byť formulár ohraničená karta — inak by nadpis
       sekcie zostal tmavý text na tmavom a zmizol by. Pôvodný web to má
       rovnako: biely box s rámčekom a zaobleniami. */
    .rail__side #booking {
        --booking-bg: var(--swhite);
        --booking-pb: 0px;
        padding-block: 24px;
        padding-inline: 24px;
        border: 1px solid var(--smedium);
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .14);

        /* Obmedzenie výšky patrí na kartu, nie na stĺpec okolo nej. Keď bolo
           na stĺpci, karta sa pri rolovaní orezala rovno cez rámček a spodok
           vyzeral useknutý. Takto zostane karta celá — roluje sa jej obsah. */
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* Formulár si vnútri karty nedrží vlastnú kartu. */
    .rail__side .bform,
    .rail__side .closed-note {
        margin: 0;
        padding: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }
    /* Sekcia v obsahu má nad nadpisom 64 px vzduchu a text na stred. V úzkej
       lište je to 64 px premárnenej výšky a horšie sa to číta. */
    .rail__side .shdl { margin: 0 0 12px; padding: 0; text-align: left; }
    .rail__side .shdl h2 { margin: 0; font-size: 20px; }

    /* V lište stáli nad sebou dva nadpisy a dva podtituly o tom istom —
       „Rezervuj si termín / Vyber si čas…" a hneď pod tým „Rezervácia termínu".
       Zostáva nadpis sekcie a riadok s dĺžkou termínu, zvyšok je navyše. */
    .rail__side .shdl p,
    .rail__side .bform > h3 { display: none; }

    /* Inak je formulár v lište len o čosi tesnejší než v obsahu.
       Terče zostávajú nad 24 px podľa WCAG 2.2. */
    /* V karte je menej miesta než v obsahu, tak ide všetko o kúsok bližšie
       k sebe. Výšky terčov zostávajú — mení sa len vzduch medzi nimi. */
    .rail__side .bform { padding: 0; }
    .rail__side .bform .lead { margin-bottom: 12px; }
    .rail__side .bcal { margin-bottom: 12px; }
    .rail__side .bfield { margin-bottom: 10px; }
    /* Polia zostávajú v dvoch stĺpcoch aj v karte. Pod sebou boli čitateľnejšie,
       ale karta narástla o 176 px a na MacBooku Air sa začala rolovať vnútri —
       to je horšie než o kúsok užšie políčka. Popisky sa do 159 px zmestia. */
    .rail__side .bgrid { gap: 0 10px; }
    .rail__side .alert { margin-bottom: 12px; padding: 10px 12px; }
    .rail__side .bwiz__nav { margin-bottom: 12px; }
    .rail__side .bform .hint { margin-top: 3px; }
    .rail__side .bform .submit { margin-top: 16px; }
    .rail__side .bform .note { margin-top: 8px; }

    /* Karta sa nesmie rolovať vnútri na bežnom notebooku. Na MacBooku Air
       (1440 × 900) zostane na kartu 768 px a krok s údajmi mal 788 — preto
       je tu všetko o kúsok stiahnuté. Keď sa bude do karty niečo pridávať,
       treba to premerať znova. */
    .rail__side .bcall { margin-bottom: 8px; }
    .rail__side .bcall a { font-size: 23px; }
    .rail__side .bor { margin-bottom: 8px; }
    .rail__side .bonline { margin-bottom: 8px; font-size: 17px; }
    .rail__side .bcheck--consent span { font-size: 13px; }

    /* Názov auta je v nadpise hneď vedľa karty, v nej by sa len opakoval.
       Pri službe nesie dĺžku termínu, takže tam zostáva.

       Priamy potomok, nie ktorýkoľvek: tretí krok má vlastný úvodný riadok
       („Nepovinné…") a ten sa skrývať nemá. */
    .rail--car .bform > .lead { display: none; }

    /* Políčka 44 px namiesto 48 a tesnejšie popisky. Na dotyk sa v karte
       neklikká (pod 1120 px je z nej vyskakovacia vrstva s pôvodnými
       rozmermi), takže tu ide o myš — a 44 px je aj tak nad minimom. */
    .rail__side .bform input[type=text],
    .rail__side .bform input[type=tel],
    .rail__side .bform input[type=email],
    .rail__side .bform input[type=date],
    .rail__side .bform input[type=time],
    .rail__side .bform select { min-height: 44px; }
    .rail__side .bfield label { margin-bottom: 3px; }
    .rail__side .bform .hint { font-size: 12px; }
    .rail__side .bform .note { font-size: 12px; margin-top: 6px; }
    .rail__side .bwiz__nav { margin-bottom: 8px; padding-bottom: 8px; }
    .rail__side .bwiz__recap { padding-block: 8px; margin-bottom: 12px; }
    /* Poznámka je nepovinná; v karte jej stačí menšie okno, zväčšiť sa dá
       ťahom za roh. */
    .rail__side .bform textarea { min-height: 64px; }
    .rail__side .bslots__grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
    .rail__side .bwiz__actions { margin-top: 14px; }
    .rail__side .bwiz__actions .btn-prim,
    .rail__side .bform .submit .btn-prim { width: 100%; min-width: 0; }

    /* Spodná lišta a jej krížik patria len na telefón. */
    .bsheet__bar,
    .bsheet__close { display: none; }
}

/* =============================================================================
   Rezervácia ako spodná lišta a vyskakovacia vrstva (telefón)
   -----------------------------------------------------------------------------
   Rovnaký vzor, aký mal pôvodný web pri prenájme auta: naspodku úzka lišta,
   po kliknutí vrstva cez obrazovku.

   Otvára to `:target`, nie JavaScript — celý formulár funguje aj s vypnutým
   JS a bolo by škoda prísť o to práve na kroku, ktorý ho sprístupňuje.
   Skript to potom povýši na poriadny dialóg (Escape, návrat fokusu), ale nie
   je podmienkou. `.is-open` je stav, ktorý nasadzuje skript, a zároveň ho
   vie nasadiť server, keď formulár odmietne — inak by človek chyby nevidel.
   ========================================================================== */
@media (max-width: 1119px) {
    /* Tablet ide cestou telefónu, nie desktopu: na karty vedľa obsahu tam
       nie je miesto, a formulár roztiahnutý cez celú šírku obsahu pôsobí ako
       stránka sama pre seba. Spodná lišta s vrstvou je tu prirodzenejšia. */

    /* Miesto pod pätou, aby ju prilepená lišta neprekrývala. Len na stránkach,
       ktoré lištu naozaj majú — inde by dole zostala diera. */
    body:has(.bsheet__bar) { padding-bottom: 76px; }

    .bsheet__bar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        inset: auto 0 0 0;
        z-index: 30;
        padding: 12px 16px;
        background: var(--swhite);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
        border-radius: 12px 12px 0 0;
    }
    .bsheet__bar-text {
        flex: 1;
        min-width: 0;   /* bez toho sa orezanie názvu nižšie neuplatní */
        font-size: 12px;
        color: var(--sdark);
        line-height: 1.35;
    }
    .bsheet__bar-text b {
        display: block;
        font-size: 14px;
        color: var(--black);

        /* Názov auta musí zostať na jednom riadku. Lišta je pripnutá na
           spodok a jej výška sa odpočítava od obsahu stránky — druhý riadok
           by ukrojil z toho, čo je vidieť. */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bsheet__bar .btn-prim { padding: 8px 18px; font-size: 14px; white-space: nowrap; }

    /* Zámok rolovania nasadzuje skript; bez neho sa stránka pod vrstvou
       roluje, čo je nepríjemné, ale nie rozbité. */
    body.bsheet-lock { overflow: hidden; }

    .bsheet { display: none; }

    .bsheet:target,
    .bsheet.is-open {
        /* Rovnaký dôvod ako v lište: vlastnosti, ktoré blok dostáva cez id,
           sa tu prepínajú premennými, nie silnejším selektorom. */
        --booking-bg: rgba(0, 0, 0, .55);
        --booking-pb: 0px;
        --wrap: 100%;
        --gutter: 0px;

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: fixed;
        inset: 0;
        z-index: 40;
    }

    .bsheet__close {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        width: 44px;
        height: 44px;
        margin: 0 8px 8px 0;
        border: 1px solid rgba(255, 255, 255, .4);
        border-radius: 999px;
        /* Krížik leží na závoji, a ten môže mať pod sebou aj tmavú hlavičku.
           Bez vlastného tmavého podkladu a svetlého okraja tam zmizne. */
        background: rgba(0, 0, 0, .6);
        color: var(--swhite);
    }

    .bsheet:target .shdl,
    .bsheet.is-open .shdl {
        margin: 0;
        padding: 16px 16px 0;
        background: var(--swhite);
        border-radius: 20px 20px 0 0;
    }

    /* Telefón, oddeľovač a nadpis online rezervácie sú ďalšie samostatné
       bloky panela — bez vlastného bieleho podkladu by viseli na závoji
       nad textom stránky. */
    .bsheet:target .bcall,
    .bsheet.is-open .bcall,
    .bsheet:target .bor,
    .bsheet.is-open .bor,
    .bsheet:target .bonline,
    .bsheet.is-open .bonline {
        margin: 0;
        padding: 8px 16px 0;
        background: var(--swhite);
    }
    /* Na telefóne je hlavička panela drahá — číslo môže byť menšie. */
    .bsheet .bcall a { font-size: 22px; }
    .bsheet .bonline { font-size: 16px; }
    /* Nadpis sekcie je na stránke veľký, aby delil obsah. V paneli je to
       hlavička okna — dvojriadkový titulok tam berie miesto formuláru. */
    .bsheet .shdl h2 { margin: 0; font-size: 20px; }
    .bsheet .shdl p { display: none; }

    /* Roluje sa len panel, nie stránka za ním. */
    .bsheet:target .bform,
    .bsheet.is-open .bform,
    .bsheet:target .closed-note,
    .bsheet.is-open .closed-note {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        max-height: 74vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-top: 12px;
    }

    /* Nadpis je už v hlavičke panela. */
    .bsheet .bform > h3 { display: none; }
}

@media (min-width: 768px) and (max-width: 1119px) {
    /* Na tablete by panel cez celú šírku vyzeral ako druhá stránka. Drží
       šírku obsahového stĺpca a stojí na strede; krížik sa zarovná na jeho
       pravú hranu, nie na okraj okna. */
    /* Selektory sú vypísané zdĺhavo naschvál: bloky panela majú vyššie
       `margin: 0`, a to by kratší zápis (`.bsheet:target > *`) neprebil —
       vyhralo by nulové odsadenie a panel by zostal pri ľavom okraji. */
    .bsheet:target .shdl,
    .bsheet.is-open .shdl,
    .bsheet:target .bcall,
    .bsheet.is-open .bcall,
    .bsheet:target .bor,
    .bsheet.is-open .bor,
    .bsheet:target .bonline,
    .bsheet.is-open .bonline,
    .bsheet:target .bform,
    .bsheet.is-open .bform,
    .bsheet:target .closed-note,
    .bsheet.is-open .closed-note {
        width: 100%;
        max-width: var(--wrap-narrow);
        margin-inline: auto;
    }

    /* Krížik sa na celý panel nešíri — sadne si na jeho pravý horný roh. */
    .bsheet:target .bsheet__close,
    .bsheet.is-open .bsheet__close {
        width: 44px;
        margin-left: auto;
        margin-right: calc((100% - var(--wrap-narrow)) / 2);
    }

    /* Spodná lišta drží obsahový stĺpec rovnako ako zvyšok stránky. */
    .bsheet__bar { padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2); }
}

/* =============================================================================
   Telefón a oddeľovač nad formulárom (detail auta)
   -----------------------------------------------------------------------------
   Pôvodný web mal v karte najprv číslo a až pod ním formulár. Kto chce vybaviť
   prenájom hneď, zavolá; kto nechce telefonovať, vyplní. Obe cesty sú vidieť
   naraz, nie jedna schovaná za druhou.
   ========================================================================== */
.bcall { margin: 0 0 12px; }
.bcall a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 26px;
    font-weight: 600;
    color: var(--primary);
}
.bcall a:hover { color: var(--primary-dark); }

.bor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--sdark);
}
/* Čiary po stranách slova. Dve pseudoelementy namiesto obrázka — dĺžka sa
   dopočíta sama podľa šírky karty. */
.bor::before,
.bor::after {
    content: '';
    flex: 1 1 0;
    height: 1px;
    background: var(--smedium);
}

.bonline { margin: 0 0 12px; font-size: 18px; }

/* Rozcestník „zavolaj alebo vyplň" patrí k prvému kroku. Kto je pri údajoch,
   už sa rozhodol — a karta bez neho o 105 px nižšia sa na notebooku zmestí
   bez vlastného rolovania. Atribút nasadzuje krokovadlo; bez JavaScriptu
   žiadny nie je a blok zostane, čo je správne — vtedy je formulár celý
   pod sebou. */
#booking[data-step="2"] .bcall,
#booking[data-step="2"] .bor,
#booking[data-step="2"] .bonline,
#booking[data-step="3"] .bcall,
#booking[data-step="3"] .bor,
#booking[data-step="3"] .bonline { display: none; }

/* To isté platí pre riadok pod nadpisom („Pneuservis · 45 min"): pri
   vypĺňaní údajov už len opakuje, čo si človek vybral — a to je v zhrnutí
   hneď nad poľami. */
#booking[data-step="2"] .bform > .lead,
#booking[data-step="3"] .bform > .lead { display: none; }

/* =============================================================================
   Rezervačný formulár na podstránke služby
   ========================================================================== */
/* Pozadie a spodná medzera sú cez premenné, aby sa dali vypnúť v lište
   a vo vyskakovacej vrstve. Prebiť ich tam selektorom by nešlo — blok sa
   adresuje cez id a to má vyššiu váhu než akákoľvek trieda. */
#booking {
    background: var(--booking-bg, var(--slight));
    padding-block: 0 var(--booking-pb, 56px);
}

.bform {
    background: var(--swhite);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 122, 252, .1);
    padding: 24px 20px;
    margin: 8px 16px 0;
}

.bform h3 { font-size: 20px; margin: 0 0 4px; }
.bform .lead { font-size: 14px; color: var(--sdark); margin: 0 0 20px; }

.bform .step { margin: 0 0 24px; }
.bform .step:last-of-type { margin-bottom: 0; }
.bform .step__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sdark);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
}
.bform .step__num {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--swhite);
    font-size: 12px;
    flex: 0 0 auto;
}

.bfield { margin: 0 0 14px; }
.bfield label { display: block; font-size: 14px; margin: 0 0 5px; color: var(--black); }
.bfield .req { color: var(--error); }

/* --- dátumové pole: „Vyber" namiesto masky dd/mm/yyyy ---------------------
   Natívne pole typu `date` placeholder nepozná — masku si kreslí samo
   a bežnými prostriedkami sa prekryť nedá. Ide to len pseudoelementom
   `::-webkit-datetime-edit`, ktorý majú Chrome, Edge a Safari. Vo Firefoxe
   podmienka nižšie neprejde a zostane maska; nie je to chyba, len menej
   priateľský zápis, a ten zvyšok sveta nemá prečo doplácať.

   Prázdnosť drží trieda z JavaScriptu, nie `:invalid`. Pole môže byť
   neplatné aj s vyplneným dátumom — napríklad mimo rozsahu `min`/`max` —
   a vtedy by sa „Vyber" objavilo cez napísaný dátum.

   `.js-on` je tam preto, že triedu ďalej prepína skript. Bez neho by
   zostala na poli aj po vybratí dátumu a prekryla by ho. */
.bpick { position: relative; display: block; }
.bpick__ph { display: none; }

@supports selector(::-webkit-datetime-edit) {
    .js-on .bpick input.is-empty:not(:focus)::-webkit-datetime-edit { opacity: 0; }

    .js-on .bpick input.is-empty:not(:focus) ~ .bpick__ph {
        display: flex;
        align-items: center;
        position: absolute;
        inset: 0;
        padding-inline: 12px;
        font-size: 16px;
        color: var(--sdark);

        /* Kliknutie musí prejsť na pole pod ním, inak sa výber neotvorí. */
        pointer-events: none;
    }
}

.bform input[type=text],
.bform input[type=tel],
.bform input[type=email],
.bform input[type=date],
.bform input[type=time],
.bform select,
.bform textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px;
    border: 1px solid var(--smedium);
    border-radius: 8px;
    /* 16px, aby Safari na iPhone nepriblížilo stránku pri kliknutí. */
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    color: var(--black);
    background: var(--swhite);
    box-sizing: border-box;
}
.bform textarea { min-height: 88px; resize: vertical; }
.bform select { appearance: none; background-image: none; }

.bform input:focus, .bform select:focus, .bform textarea:focus {
    border-color: var(--primary);
    outline: 2px solid rgba(0, 122, 252, .18);
}
.bform input[aria-invalid=true], .bform select[aria-invalid=true] { border-color: var(--error); }

.bform .err { font-size: 13px; color: var(--error); margin: 5px 0 0; }
.bform .hint { font-size: 13px; color: var(--sdark); margin: 5px 0 0; }

/* Výkony ako zaškrtávacie polia */
.bcheck {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    cursor: pointer;
}
.bcheck input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--primary); }
.bcheck span { font-size: 15px; }
.bcheck small { display: block; font-size: 13px; color: var(--sdark); }

.bform .submit { margin: 24px 0 0; }
.bform .submit .btn-prim { width: 100%; text-align: center; padding: 14px 24px; }
.bform .note { font-size: 13px; color: var(--sdark); margin: 12px 0 0; text-align: center; }

/* =============================================================================
   Krokovaný formulár a kalendár
   -----------------------------------------------------------------------------
   Formulár bol v jednom stĺpci vysoký cez tri obrazovky mobilu. Kroky ho
   skrátia na jednu a kalendár nahradí roládu s tromi stovkami časov.

   Skrývanie rieši atribút hidden — nie trieda. Vďaka tomu je stav rovnaký
   pre CSS, pre prehliadač aj pre čítačku obrazovky a nedá sa rozísť.
   ========================================================================== */
[hidden] { display: none !important; }

/* Krokovadlo */
.bwiz__nav {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--slight);
}
.bwiz__nav li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--smedium);
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* Číslo kroku je tlačidlo, nie len text — dá sa ním vrátiť späť a opraviť,
   čo človek vyplnil. Vyzerať má presne ako predtým, takže si od položky
   zoznamu preberá písmo aj farbu a nemá vlastné pozadie ani rámček.

   Kroky, na ktoré sa ešte nedá ísť, sú `disabled`. Prehliadač ich tým vyradí
   aj z prechádzania tabulátorom, čo je presne to, čo chceme — neaktívny krok
   nemá byť zastávka na ceste formulárom. */
.bwiz__nav .bwiz__step {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;

    /* Prehliadač má pre tlačidlá vlastné `text-transform: none`
       a `letter-spacing: normal` a tie prebijú dedenie od položky zoznamu —
       bez týchto dvoch riadkov by popisky prestali byť verzálkami. */
    text-transform: inherit;
    letter-spacing: inherit;
}
.bwiz__nav .bwiz__step[disabled] { cursor: default; }
.bwiz__nav .bwiz__step:not([disabled]):hover { color: var(--black); }

.bwiz__nav .bwiz__dot {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--slight);
    color: var(--sdark);
    font-size: 12px;
    flex: 0 0 auto;
}
.bwiz__nav li.is-on { color: var(--black); }
.bwiz__nav li.is-on .bwiz__dot { background: var(--primary); color: var(--swhite); }
/* Hotový krok je zelený ako rekapitulácia termínu — aktuálny tak zostane
   jediný modrý a nedá sa s ním zameniť. */
.bwiz__nav li.is-done { color: var(--sdark); }
.bwiz__nav li.is-done .bwiz__dot { background: var(--okbg); color: var(--ok); }

/* Tri kroky sa na najužších telefónoch (320 px) do riadka nezmestia —
   „SPRESNENIE" je jedno dlhé slovo, ktoré sa nemá kde zlomiť, a krokovadlo
   pretieklo o 8 px. Preto sa tam o kúsok stiahne. Je to jediné miesto na
   webe s hornou hranicou šírky; všade inde sa stavia od telefónu nahor,
   ale tu ide o výnimku pre najmenšie displeje, nie o pravidlo. */
@media (max-width: 359px) {
    .bwiz__nav { gap: 6px; }
    .bwiz__nav li { gap: 6px; font-size: 11px; letter-spacing: 0; }
    .bwiz__nav .bwiz__step { gap: 6px; }
    .bwiz__nav .bwiz__dot { width: 20px; height: 20px; font-size: 11px; }
}

/* Prechod na nepovinný tretí krok a späť. Vyzerá ako odkaz, nie ako tlačidlo —
   vedľa modrého „Rezervovať termín" by inak súperili o pozornosť.

   Bez JavaScriptu sú všetky kroky pod sebou a skákať medzi nimi netreba —
   tlačidlo by tam len sedelo a po kliknutí nespravilo nič. Preto sa ukáže
   až vtedy, keď je skript naozaj v hre. */
.bwiz__more { display: none; }
.js-on .bwiz__more {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 8px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}
.bwiz__more:hover { color: var(--primary-dark); }

.bwiz__actions { margin: 20px 0 0; }
.bwiz__actions .btn-prim { width: 100%; text-align: center; padding: 14px 24px; }
.bwiz__actions .err { text-align: center; }

/* Rekapitulácia termínu na druhom kroku */
.bwiz__recap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--okbg);
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
}
.bwiz__change {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 300;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
    flex: 0 0 auto;
}

/* Mriežka mesiaca */
.bcal { margin: 0 0 20px; }
.bcal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
}
.bcal__title { margin: 0; font-size: 17px; font-weight: 700; }
.bcal__title::first-letter { text-transform: uppercase; }
.bcal__nav {
    width: 36px; height: 36px;
    border: 1px solid var(--smedium);
    border-radius: 50%;
    background: var(--swhite);
    color: var(--black);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}
.bcal__nav:disabled { color: var(--sdisabled); cursor: default; }

.bcal__dow, .bcal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.bcal__dow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sdark);
    text-align: center;
}
.bcal__day {
    position: relative;
    /* Na úzkom telefóne vyjde stĺpec asi 35 px. Štvorec by znamenal terč
       35×35, čo je na palec málo — preto radšej vyšší obdĺžnik a štvorec
       až od tabletu, kde je na mriežku miesto. */
    min-height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--slight);
    font: inherit;
    /* Pás týždňa je prvé rozhodnutie vo formulári a má to tak aj vyzerať.
       Miesto naň sa našlo tým, že mriežka časov má o riadok menej. */
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    cursor: pointer;
    padding: 0;
}
/* Tri stavy dňa a každý musí byť rozoznateľný na prvý pohľad:
   voľný (sivé pozadie, čierne číslo), plný (len obrys, stlmené číslo)
   a zavretý (nič, nedá sa kliknúť).

   Plný deň zámerne nevyzerá ako zavretý — zákazník má vidieť, že v ten
   deň termíny sú, len sú pobrané. Otvoriť sa dá, výpis mu to povie. */
.bcal__day.is-full {
    background: none;
    border-color: var(--smedium);
    color: var(--sdark);
}
.bcal__day.is-off { background: none; color: var(--sdisabled); cursor: default; }
.bcal__day[aria-pressed=true] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--swhite);
    font-weight: 600;
}
.bcal__day:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }


/* Časy vybraného dňa */
.bslots__day { margin: 0 0 20px; }
.bslots.is-js .bslots__day { display: none; }
.bslots.is-js .bslots__day.is-on { display: block; }

.bslots__label {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
}
.bslots__label::first-letter { text-transform: uppercase; }
/* 64 px stačí na „10:15" a v karte širokej 312 px sa tým zmestia štyri
   stĺpce namiesto troch — pri jedenástich termínoch to je o riadok menej.
   Pri 76 px štyri o pár desatín pixela nevyšli. */
.bslots__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
}
.tslot { position: relative; cursor: pointer; }
/* Rádio zostáva v strome — len ho neukazujeme, aby fungovala klávesnica. */
.tslot input {
    position: absolute;
    opacity: 0;
    width: 100%; height: 100%;
    margin: 0;
    cursor: pointer;
}
.tslot span {
    display: block;
    padding: 10px 4px;
    border: 1px solid var(--smedium);
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    background: var(--swhite);
}

/* Obsadený termín: drží ho niekto iný. Sivá výplň bez rámčeka — vyzerá
   ako miesto, ktoré je zabraté, nie ako tlačidlo. */
.tslot.is-taken { cursor: default; }
.tslot.is-taken span {
    border-color: transparent;
    background: var(--slight);
    color: var(--sdark);
}

/* Termín, ktorý už uplynul alebo je naň príliš neskoro. Nie je obsadený,
   len sa naň už nedá objednať — preto ani výplň, ani rámček. Zostáva
   v mriežke, aby časy medzi dňami neposkakovali. */
.tslot.is-past { cursor: default; }
.tslot.is-past span {
    border-color: transparent;
    background: none;
    color: var(--sdisabled);
}

.bslots__full {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--sdark);
}

/* Vysvetlenie pod mriežkou: prečo sú niektoré časy bledé. Bez neho si ich
   zákazník prečíta ako obsadené — a pri službe, ktorá chce vedieť deň
   vopred, je na zajtrajšku bledá skoro celá mriežka. */
.bslots__hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--sdark);
}
.tslot input:checked + span {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--swhite);
    font-weight: 600;
}
.tslot input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.bgrid { display: grid; grid-template-columns: 1fr; gap: 0 16px; }

.bcheck--consent { margin: 4px 0 0; }
.bcheck--consent span { font-size: 14px; color: var(--sdark); }

/* Hlásenia nad formulárom */
.alert {
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14px;
    margin: 0 0 20px;
}
.alert--error { background: #FFDEDE; color: #8B0000; }
.alert--info  { background: #E8F2FF; color: var(--black); }

/* Zatvorená služba */
.closed-note {
    background: var(--swhite);
    border-radius: 16px;
    padding: 28px 20px;
    margin: 8px 16px 0;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 122, 252, .1);
}
.closed-note h3 { margin: 0 0 8px; }
.closed-note p { color: var(--sdark); font-size: 15px; }

/* =============================================================================
   Potvrdzovacia stránka
   ========================================================================== */
.done { max-width: 34rem; margin: 0 auto; padding: 40px 16px 56px; }
.done__icon {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--okbg);
    color: var(--ok);
}
.done__icon svg { width: 32px; height: 32px; }
/* Prenájom sa najprv potvrdzuje telefonicky, takže jeho ikona nie je zelená
   ako pri hotovej rezervácii, ale žltá — „čakáme". */
.done__icon--wait { background: var(--waitbg); color: var(--wait); }
.done h1 { font-size: 28px; text-align: center; margin: 0 0 8px; }
.done .lead { text-align: center; color: var(--sdark); margin: 0 0 28px; }

.done__box {
    background: var(--swhite);
    border: 1px solid var(--slight);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 122, 252, .1);
    margin: 0 0 24px;
}
/* Stĺpec s názvami je široký presne na najdlhší z nich („Vozidlo"). Pevných
   7,5 rem bralo na telefóne 120 px z 300 a hodnoty vedľa sa zbytočne lámali —
   „Škoda Fabia III Combi 1.0 TSI" na dva riadky. */
.done__box dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0; }
.done__box dt { font-size: 13px; color: var(--sdark); }
.done__box dd { margin: 0; font-size: 15px; }
.done__box dd strong { font-weight: 600; }

.done__note {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--sdark);
    text-align: center;
}
.done__note span { display: block; }

.done__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* =============================================================================
   Podstránka služby — hlavička
   ========================================================================== */
#heading {
    /* Modré auto v pozadí zostáva len na domovskej stránke. Na podstránkach
       služby súperí s fotkami výkonov a na detaile auta priamo s fotkou toho
       auta, ktoré si zákazník prezerá — preto len mapový podklad. */
    background:
        linear-gradient(100deg, var(--dark) 0%, var(--dark) 52%, rgba(29,29,31,.6) 74%, rgba(29,29,31,.35) 100%),
        url('/assets/img/illustration.webp') no-repeat top right / 320px 295px,
        var(--dark);
    color: var(--swhite);
}
#heading #hero { margin: 24px 0 32px; }

/* Tmavá hlavička končí 40 px pod popisom. Musí to byť výplň, nie okraj —
   spodný okraj #hero by sa z nej pretlačil von (margin collapsing) a text by
   sa lepil na hranu.

   Tých 40 px je zároveň to, od čoho sa počíta zdvih rezervačnej karty
   (--rail-lift). Jedna hodnota pre všetky šírky — dve by si museli dávať
   pozor na poradie v súbore, lebo majú rovnakú váhu. */
#heading { padding-block: 0 40px; }
#heading #hero { margin-bottom: 0; }

/* Detail auta: pod popisom musí zostať miesto pre hornú polovicu fotky, ktorá
   do hlavičky vystupuje zo sivého pásu. Fotka je 4 : 3, takže polovica výšky
   je 37,5 % jej šírky; tá je pod 768 px rovná šírke obsahu, teda okno mínus
   dve bočné medzery. Odtiaľ `0.75 * --gutter`. */
#heading.has-photo {
    padding-bottom: calc(37.5vw - 0.75 * var(--gutter) + 24px);
}
#heading #hero h1 { font-size: 30px; max-width: 420px; }
#heading #hero p { max-width: 460px; }

/* Omrvinky 8. 10. 2026 vypadli: na štyroch stránkach zo šiestich mali dve
   položky, z ktorých prvá bola to isté, čo logo nad nimi, a druhá to isté,
   čo nadpis pod nimi. Zostal jediný spätný odkaz na detaile auta — tam je
   krok späť do ponuky naozaj časté gesto. */
#heading .back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 0;
    font-size: 14px;
    color: var(--smedium);
}
#heading .back::before { content: '‹'; font-size: 18px; line-height: 1; }
#heading .back:hover { color: var(--swhite); }

.svc-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0; }
.svc-facts li {
    list-style: none;
    font-size: 14px;
    color: var(--slight);
    display: flex;
    align-items: center;
    gap: 6px;
}
.svc-facts li b { color: var(--swhite); font-weight: 600; }

/* Ďalšie služby na konci podstránky */
#other { padding-block: 0 48px; }
#other .row { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; -webkit-overflow-scrolling: touch; }
#other .row a {
    flex: 0 0 auto;
    padding: 10px 18px;
    border: 1px solid var(--smedium);
    border-radius: 999px;
    color: var(--black);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
#other .row a:hover { border-color: var(--primary); color: var(--primary); }

/* =============================================================================
   Podstránka služby: čo služba zahŕňa
   --------------------------------------------------------------------------
   Prevzaté z pôvodných stránok služieb — fotka, názov výkonu, veta. Na mobile
   dve v riadku, na desktope všetky v jednom rade.
   ========================================================================== */
#why-svc { margin: 24px 0 40px; }
#why-svc #whywrap {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 8px;
    align-items: stretch;
}
#why-svc #whywrap .item { flex: 1 1 40%; text-align: center; }
#why-svc #whywrap .item img {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 auto 16px;
    border-radius: 12px;
}
/* Zástupné pole namiesto chýbajúcej fotky — rovnaký pomer strán ako fotky
   (420×280), aby nadpisy v mriežke začínali na rovnakej výške. */
#why-svc #whywrap .item__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    aspect-ratio: 3 / 2;
    margin: 0 auto 16px;
    background: var(--slight);
    border-radius: 12px;
}
#why-svc #whywrap .item__ph-svg {
    width: 34px;
    height: 34px;
    color: var(--primary);
    opacity: .55;
}
#why-svc #whywrap .item h3 { margin: 0 0 8px; font-size: 16px; }
#why-svc #whywrap .item p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--sdark);
    line-height: 1.45;
}
#why-svc #whywrap .item .item__price {
    margin-top: 6px;
    color: var(--primary);
    font-weight: 600;
}
#why-svc .bonus {
    display: block;
    margin: 32px 0 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

/* =============================================================================
   Podstránka služby: cenník v PDF
   ========================================================================== */
#svc-price {
    margin: 0;
    padding-block: 32px 24px;
    text-align: center;
    color: var(--black);
}
#svc-price a { color: var(--primary); font-weight: 600; }

/* =============================================================================
   Podstránka služby: prečo to nechať na nás
   ========================================================================== */
#svc-why { margin: 40px 0 24px; }
#svc-why #rcimg { width: 100%; height: auto; margin: 0; padding: 0; }
#svc-why #rcimg img {
    display: block;
    width: 100%;
    max-width: 447px;
    height: auto;
    margin: 0 auto;
}
#svc-why #rcwrap { width: 100%; margin: 32px 0 0; padding: 0; }
/* Nadpis je od 8. 10. 2026 mimo zoznamu výhod — vedľa obrázka. Na mobile
   zostáva nad ním a na stred, ako bol. */
#svc-why .svc-why__top h2 { margin: 24px 0 0; text-align: center; }
#svc-why .rcitem {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 8px;
    margin: 0 0 24px;
    padding: 0;
}
#svc-why .rcitem img {
    /* Celková veľikosť 64 px, z toho 28 px ikona — pri globálnom border-box
       sa padding počíta do šírky, takže sa uvádza vonkajší rozmer. */
    display: block;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    margin: 0;
    padding: 18px;
    background: var(--swhite);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 122, 252, .1);
}
#svc-why .rcitem .itemwrap { display: block; flex: 1 1 0; margin: 0; padding: 0; }
#svc-why .rcitem .itemwrap h3 { margin: 0 0 8px; font-size: 18px; }
#svc-why .rcitem .itemwrap p { margin: 0; color: var(--sdark); font-size: 14px; }

/* =============================================================================
   Podstránka služby: adresa, hodiny a mapa
   ========================================================================== */
#svc-contact { margin: 0 0 64px; }
#svc-contact #address .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    margin: 0 0 24px;
}
#svc-contact .adr { flex: 1 1 0; min-width: 190px; }
#svc-contact .adr h3 { margin: 0 0 8px; font-size: 18px; }
#svc-contact .adr p { margin: 0 0 8px; }
#svc-contact .adr p span { font-weight: 600; }
#svc-contact .adr p .muted,
#svc-contact .adr p.muted { font-weight: 400; color: var(--sdark); font-size: 13px; }
#svc-contact .adr ul { margin: 0 0 16px; padding: 0; }
#svc-contact .adr ul li { margin: 0 0 4px 24px; padding: 0; list-style-type: disc; }
#svc-contact .adr ul li span { font-weight: 600; }
#svc-contact .adr ul li a { color: var(--primary); }
#svc-contact #map iframe {
    display: block;
    border-radius: 16px;
    margin: 0;
    padding: 0;
}

/* =============================================================================
   Autopožičovňa: výpis áut po triedach
   --------------------------------------------------------------------------
   Prevzaté z pôvodnej stránky /auta-na-prenajom-zilina/. Karta je odkaz na
   detail; na mobile ide fotka pod nadpis, na desktope vľavo vedľa parametrov.
   ========================================================================== */
/* Nad zoznamom bol do 10. 10. 2026 úvodný box („Vyber si auto"), ktorý držal
   odstup od tmavej hlavičky. Bez neho ho musí dať samotný pás — 1px tam bol
   len preto, aby neprepadol horný okraj prvého nadpisu. */
#listing { margin: 0; padding-block: 24px 64px; background: var(--slight); }

#listing h2.class {
    display: block;
    margin: 32px 0 24px;
    padding: 0;
    color: var(--black);
    font-weight: 600;
    text-align: center;
}
#listing h2.class i {
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sdark);
    font-style: normal;
}
#listing h2.class b {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
}

#listing .car-card {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 12px;
    margin: 0 0 16px;
    padding: 16px;
    border: 0;
    border-radius: 12px;
    background: var(--swhite);
    box-shadow: 0 8px 24px rgba(0, 122, 252, .1);
    color: var(--black);
    text-decoration: none;
    overflow: hidden;
}
#listing .car-card:hover { box-shadow: 0 8px 24px rgba(0, 122, 252, .2); }

#listing .car-card .hdl {
    order: -1;               /* na mobile nadpis nad fotkou */
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
#listing .car-card .hdl .category {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}
#listing .car-card .hdl h3 { display: block; margin: 0; font-size: 20px; }

#listing .car-card img {
    display: block;
    width: 192px;
    height: 144px;
    margin: 0;
    border-radius: 8px;
    object-fit: cover;
}

#listing .car-card .params {
    display: flex;
    /* Na mobile cez celú šírku karty. Keď delila riadok s ostatným obsahom,
       zostalo na ňu 126 px a každý parameter sa lámal na dva riadky. */
    flex: 1 1 100%;
    flex-direction: column;
    margin: 0;
    padding: 0;
    font-size: 14px;
    overflow: hidden;
}
#listing .car-card .params .params-1,
#listing .car-card .params .params-2 { display: flex; flex-direction: column; }
#listing .car-card .params .param { display: block; margin: 0; padding: 4px 8px; border-radius: 4px; }
#listing .car-card .params .param:nth-child(odd) { background: var(--slight); }
/* Popisky boli na mobile skryté a zostali holé hodnoty („Benzín / Manuál /
   1.0 TSI — 70 kW"). Sú krátke, tak nech sú vidieť vždy — len potichšie
   než samotná hodnota, rovnako ako na detaile auta. */
#listing .car-card .params .param .label { color: var(--sdark); }

#listing .car-card .btm {
    display: flex;
    align-items: baseline;
    width: 100%;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--smedium);
}
#listing .car-card .btm .price { flex: 1 1 0; font-size: 18px; font-weight: 600; }

#promo-1 {
    display: block;
    margin: 40px 0 0;
    padding: 24px;
    border: 2px solid var(--primary);
    border-radius: 16px;
    background: var(--swhite);
    box-shadow: 0 8px 24px rgba(0, 122, 252, .1);
    text-align: center;
}
#promo-1 h3 { margin: 0 0 8px; font-size: 20px; color: var(--primary); }
#promo-1 p { margin: 0; font-size: 14px; }

/* =============================================================================
   Autopožičovňa: prečo si vybrať nás
   ========================================================================== */
/* Spodný okraj je malý zámerne: väčšina medzery pod sekciou sa presunula
   nad deliacu čiaru nižšie, aby čiara zostala v polovici medzi textom
   a nasledujúcim blokom otázok. */
#rent-why { margin: 24px 0 8px; }
#rent-why #whywrap {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 8px;
    align-items: stretch;
}
/* Veľkosti sú odmerané z pôvodného webu: ikona 96 px, nadpis 18 px, text
   16 px. Odkedy je to na ponuke áut jediná sekcia tohto druhu (sekcia
   „Prenájom je jednoduchý" 10. 10. 2026 vypadla, hovorila to isté inými
   slovami), môže zabrať miesto, ktoré si predtým delili dve. */
#rent-why #whywrap .item { flex: 1 1 40%; text-align: center; }
#rent-why #whywrap .item img { display: block; width: 96px; height: 96px; margin: 0 auto 16px; }
#rent-why #whywrap .item h3 { margin: 0 0 8px; font-size: 18px; }
#rent-why #whywrap .item p { margin: 0; font-size: 16px; color: var(--sdark); line-height: 1.5; }
/* Pod sekciou vodorovná čiara. Nasleduje blok otázok a obidva sú biele, takže
   bez nej sa zlievajú do jednej dlhej plochy. Čiara je pseudoprvkom sekcie,
   nie samostatnou značkou v šablóne — je to výzdoba, nie obsah, a čítačka ju
   nemá čo hlásiť. Vnútro sekcie je už orezané na šírku obsahu, takže čiara
   nejde od kraja po kraj okna. */
#rent-why::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: 72px;
    background: var(--smedium);
}

/* Doveta pod štvoricou dôvodov. Nie je to piaty dôvod, len dodatok — na
   pôvodnom webe je rovnako veľká ako ostatné texty a nie je tučná. */
#rent-why .bonus {
    display: block;
    margin: 32px 0 0;
    font-size: 16px;
    text-align: center;
}

/* =============================================================================
   Často kladené otázky
   --------------------------------------------------------------------------
   Rozbaľovanie rieši <details>, teda prehliadač — bez JavaScriptu.
   ========================================================================== */
#faq { margin: 0 0 80px; }
#faq #questions { display: block; margin: 0; padding: 0; }
#faq .question {
    display: block;
    max-width: var(--wrap-narrow);
    margin: 0 auto 8px;
    padding: 16px;
    border-radius: 8px;
    background: var(--slight);
}
#faq .question summary {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;          /* skryje predvolený trojuholník */
}
#faq .question summary::-webkit-details-marker { display: none; }
#faq .question summary::after {
    content: '+';
    float: right;
    margin-left: 12px;
    color: var(--primary);
    font-weight: 600;
}
#faq .question[open] summary::after { content: '–'; }
#faq .question .answer p { margin: 8px 0 0; padding: 0; font-size: 15px; color: var(--sdark); }
#faq .question .answer a { color: var(--primary); }
#faq .question .answer a:hover { text-decoration: underline; }

/* =============================================================================
   Podmienky prenájmu
   ========================================================================== */
#terms { margin: 0 0 64px; padding-block: 32px 0; }
#terms .terms__block { max-width: var(--wrap-narrow); margin: 0 auto 32px; }
#terms h2 {
    margin: 0 0 12px;
    padding: 0 0 8px;
    font-size: 20px;
    border-bottom: 1px solid var(--smedium);
}
#terms h3 { margin: 20px 0 8px; font-size: 16px; color: var(--sdark); }
#terms ul { margin: 0 0 12px; padding-left: 22px; }
#terms ul:last-child { margin-bottom: 0; }
#terms .terms__block p { margin: 0 0 12px; line-height: 1.55; }
#terms .terms__block p:last-child { margin-bottom: 0; }
#terms .terms__block a { text-decoration: underline; }
/* Telefón sa nemá lámať v polovici čísla. */
#terms .terms__block a[href^="tel:"] { white-space: nowrap; }
#terms li { margin: 0 0 6px; line-height: 1.55; }
#terms .terms__note,
#terms .terms__cta { max-width: var(--wrap-narrow); margin: 0 auto; text-align: center; }
#terms .terms__note {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--slight);
    border-radius: 12px;
    font-size: 15px;
}
#terms .terms__note a { color: var(--primary); font-weight: 600; }

/* =============================================================================
   Detail auta
   --------------------------------------------------------------------------
   Prevzaté z pôvodného webu. Jeden rozdiel: tam bola fotka absolútne
   pozicovaná a blok parametrov pod ňou mal padding-top 128–348 px podľa
   šírky okna. Tu je fotka v prúde — vizuálne to isté, ale nerozsype sa,
   keď sa zmení výška hlavičky.
   ========================================================================== */
/* Detail auta má vlastnú fotku, tak nepotrebuje vysoké minimum — pod fotkou
   by zostalo prázdne miesto. Mapový podklad si drží, ten fotke nekonkuruje
   (na rozdiel od modrého auta, ktoré je len na domovskej). */
#heading.has-photo { min-height: 0; }

#heading .car-cat {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-on-dark);
    text-transform: uppercase;
}

/* Fotka stojí na začiatku sivého pásu a hornou polovicou z neho vystupuje
   nahor na tmavú hlavičku.

   Posúva ju záporný horný okraj v PERCENTÁCH. Percentuálny okraj sa počíta
   zo šírky rodiča, takže pri pomere strán 4 : 3 je polovica výšky presne
   37,5 % šírky — a vyjde to rovnako na mobile aj na širokej obrazovke bez
   jediného čísla navyše.

   Preto je strop šírky na obale a nie na obrázku: obrázok musí byť presne
   taký široký ako jeho rodič, inak by percento sedelo na inú šírku. */
#car-photo {
    display: flow-root;   /* okraj obrázka nesmie prepadnúť von z obalu */
    position: relative;
    z-index: 1;           /* nad tmavou hlavičkou aj nad sivým pásom */
    max-width: var(--wrap-narrow);
    margin: 0 auto 24px;
    padding: 0;
}
#car-photo img {
    display: block;
    width: 100%;
    height: auto;
    margin: -37.5% 0 0;
    border-radius: 16px;
    background: var(--swhite);
    box-shadow: 0 8px 24px rgba(0, 122, 252, .3);
}

/* Sivý pás nadväzuje na tmavú hlavičku bez medzery — na jeho hornú hranu
   dosadá fotka svojou polovicou. */
#mainparam { margin: 0; padding-block: 0 32px; background: var(--slight); }
#mainparam .params-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 8px;
    max-width: var(--wrap-narrow);
    margin: 0 auto 24px;
    padding: 0;
}
#mainparam .params-grid li {
    flex: 1 1 25%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
#mainparam .params-grid li span { display: block; margin: 0; padding: 0; }
#mainparam .params-grid li .label { font-size: 12px; color: var(--sdark); }
#mainparam .params-grid li .value { font-size: 16px; font-weight: 600; }

#mainparam #pricefrom {
    display: flex;
    align-items: center;
    max-width: var(--wrap-narrow);
    margin: 0 auto;
    padding: 20px 24px;
    background: var(--swhite);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 122, 252, .1);
    color: var(--black);
    text-decoration: none;
}
#mainparam #pricefrom:hover { box-shadow: 0 8px 24px rgba(0, 122, 252, .25); }
#mainparam #pricefrom .left { display: flex; align-items: center; flex: 1 1 auto; gap: 8px; }
#mainparam #pricefrom .left img { flex: 0 0 auto; width: 28px; height: 28px; }
#mainparam #pricefrom .right {
    /* Na úzkom mobile sa „20,00 € / deň" pri 22 px láme na dva riadky. */
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

#tech { padding-block: 32px 0; }
#tech #tdata {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: var(--wrap-narrow);
    margin: 0 auto;
    padding: 0;
}
/* Základ 28 % znamená tri boxy v rade; čo zostane na poslednom riadku, to sa
   roztiahne na celú šírku — presne ako na pôvodnom webe. */
#tech #tdata .tcard {
    flex: 1 1 28%;
    margin: 0;
    padding: 18px 12px;
    list-style: none;
    text-align: center;
    background: var(--slight);
    border-radius: 12px;
}
#tech #tdata .tcard span { display: block; }
#tech #tdata .tcard .label { font-size: 13px; color: var(--sdark); }
#tech #tdata .tcard .value { font-size: 17px; font-weight: 700; }

/* --- cenník prenájmu ------------------------------------------------------
   Pôvodný web mal holú tabuľku na pozadí stránky, bez boxu a bez tieňa.
   Riadkov je osem a oko sa pri čítaní zľava doprava stráca, preto je každý
   druhý podfarbený. Linka medzi každými dvoma riadkami pôsobila nepokojne.

   `border-collapse: separate` je tu zámerne: pri `collapse` prehliadače
   zaoblenie buniek ignorujú a podfarbené pásy by mali ostré rohy. */
#cennik { padding-block: 40px 48px; }
#cennik .ptable {
    width: 100%;
    max-width: var(--wrap-narrow);
    margin: 24px auto 0;
    border-collapse: separate;
    border-spacing: 0;
}
/* Nič sa nesmie lámať: „400 km / deň" na dvoch riadkoch zdvojnásobí výšku
   každého riadka a z ôsmich hladín je zrazu pol obrazovky. Preto sú na
   telefóne bunky užšie a písmo menšie, nie text na viac riadkov. */
#cennik .ptable th,
#cennik .ptable td { padding: 10px 8px; text-align: left; white-space: nowrap; }
#cennik .ptable thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--sdark);
    border-bottom: 1px solid var(--smedium);
}
#cennik .ptable thead th:last-child,
#cennik .ptable tbody td:last-child { text-align: right; }

#cennik .ptable tbody th {
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px 0 0 8px;
}
#cennik .ptable tbody td { font-size: 13px; color: var(--sdark); }
#cennik .ptable tbody td:last-child {
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
    border-radius: 0 8px 8px 0;
}
#cennik .ptable tbody tr:nth-child(even) > * { background: var(--slight); }

/* Posledná hladina je najdlhšie obdobie, a teda najnižšia denná cena —
   to je číslo, kvôli ktorému väčšina ľudí tabuľku otvára. */
#cennik .ptable tbody tr.is-best td:last-child { color: var(--primary); }

#cennik .price-note {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--sdark);
    text-align: center;
}
#cennik .price-note + .price-note { margin-top: 2px; }
#cennik .price-note a { color: var(--primary); font-weight: 600; }

#cennik .price-note--link { margin-top: 24px; }
#cennik .price-note--link a {
    color: var(--black);
    font-weight: 400;
    text-decoration: underline;
}
#cennik .price-note--link a:hover { color: var(--primary); }

#benefit { padding-block: 32px 0; }
#benefit ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: var(--wrap-narrow);
    margin: 0 auto;
    padding: 0;
}
#benefit ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#benefit ul li img { flex: 0 0 auto; width: 24px; height: 24px; }
#benefit #promo-1 { max-width: var(--wrap-narrow); margin: 32px auto 0; }

/* --- malé modré nadpisy a výbava (detail auta) ------------------------------
   Technické údaje, Výbava a Výhody idú na detaile auta pod sebou hneď pod
   sivým pásom a nesú malý modrý verzálkový nadpis, ako na pôvodnom webe.
   Veľký čierny nadpis na stred si necháva až cenník — ten tri vecné bloky
   nad sebou vizuálne uzatvára.

   Veľké písmená robí CSS, nie text v šablóne. V texte zostáva „Technické
   údaje", takže čítačka aj vyhľadávač dostanú normálny nadpis. */
.minihdl {
    max-width: var(--wrap-narrow);
    margin: 0 auto 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary);
}

/* Výbava na detaile auta nie je karta, ale sivé štítky za sebou. Prebiť to
   treba dvakrát: základ `#why` má sivé pozadie kvôli domovskej stránke
   a mriežka od 1120 px z neho robí kartu s rohmi. Obe pravidlá majú rovnakú
   váhu ako toto, takže rozhoduje poradie v súbore — a toto je nižšie. */
.rail--car #why {
    padding-block: 32px 0;
    background: none;
    border-radius: 0;

    /* Späť na bočné odsadenie celej stránky. Mriežka od 1120 px pridáva
       `#why` 24 px, lebo inde je to karta — tu to musí byť zarovnané
       s nadpisom nad tagmi. V stĺpci mriežky je `--gutter` nula, takže
       ten istý zápis vyjde na 0 a na telefóne na okraj stránky. */
    padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
}
.rail--car #why .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: var(--wrap-narrow);
    margin: 0 auto;
    padding: 0;
}
.rail--car #why .tags li {
    margin: 0;
    padding: 10px 18px;
    list-style: none;
    font-size: 15px;
    background: var(--slight);
    border-radius: 999px;
}

/* --- ďalšie autá pod detailom --------------------------------------------- */
#more-cars { padding-block: 0 48px; background: var(--slight); }
#more-cars .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 8px 0 0;
}
#more-cars .mini-card {
    display: flex;
    flex: 1 1 100%;
    gap: 16px;
    align-items: center;
    padding: 12px;
    background: var(--swhite);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 122, 252, .1);
    color: var(--black);
    text-decoration: none;
}
#more-cars .mini-card:hover { box-shadow: 0 8px 24px rgba(0, 122, 252, .22); }
#more-cars .mini-card img {
    flex: 0 0 auto;
    width: 120px;
    height: 90px;
    border-radius: 8px;
    object-fit: cover;
}
#more-cars .mini-card__body { display: block; flex: 1 1 0; min-width: 0; }
#more-cars .mini-card__body b { display: block; font-size: 15px; }
#more-cars .mini-card__sub {
    display: block;
    margin: 2px 0 6px;
    font-size: 13px;
    color: var(--sdark);
}
#more-cars .mini-card__price { display: block; font-weight: 600; color: var(--primary); }
#more-cars .more-cars__all { margin: 24px 0 0; text-align: center; }

@media (min-width: 768px) {
    .bform { max-width: var(--wrap-narrow); margin: 8px auto 0; padding: 32px; }
    .bgrid { grid-template-columns: 1fr 1fr; }
    .bcal__day { font-size: 16px; aspect-ratio: 1; min-height: 0; }
    .bslots__grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
    .bwiz__actions .btn-prim, .bform .submit .btn-prim { width: auto; min-width: 240px; }
    .bwiz__actions, .bform .submit { text-align: center; }
    .closed-note { max-width: var(--wrap-narrow); margin: 8px auto 0; }
    /* Spodný okraj musí zostať nulový — medzeru pod popisom drží výplň
       hlavičky a od nej sa počíta zdvih rezervačnej karty. */
    #heading #hero { margin: 40px 0 0; }
    /* Strop 420 px drží riadok čitateľný na mobile. Na širokej obrazovke by
       nadpis zbytočne lámal na dva riadky a fotka pod ním by klesla nižšie,
       než kam sa zarovnáva rezervačná karta. */
    #heading #hero h1 { font-size: 40px; max-width: none; }
    /* Popis stojí vedľa rezervačnej karty, takže môže využiť obsahový stĺpec.
       Strop 460 px je pre mobil, tu by text zbytočne lámal.

       Miesto na dva riadky má aj jednoriadkový popis. Vrch karty sa totiž
       počíta od spodnej hrany hlavičky jedným číslom pre všetky služby —
       a keby sa výška popisu líšila (čistenie áut má dva riadky, ostatné
       jeden), karta by na každej stránke začínala inde. Jeden riadok vzduchu
       navyše je lacnejší než rozhádzané zarovnanie. */
    #heading:not(.has-photo) #hero p {
        max-width: var(--wrap-narrow);
        min-height: 3.1em;
        margin-bottom: 0;
    }
    #heading {
        background:
            linear-gradient(100deg, var(--dark) 0%, var(--dark) 50%, rgba(29,29,31,.6) 72%, rgba(29,29,31,.3) 100%),
            url('/assets/img/illustration.webp') no-repeat top right / 560px 517px,
            var(--dark);
    }
    #other .row { justify-content: center; flex-wrap: wrap; }

    /* Podstránka služby: výkony po dvoch v rade. V jednom rade boli štyri
       stĺpce po 162 px a každý nadpis sa lámal na tri riadky. */
    #why-svc { margin: 32px 0; }
    #why-svc #whywrap { flex-wrap: wrap; gap: 32px 24px; }
    #why-svc #whywrap .item { flex: 1 1 calc(50% - 12px); max-width: calc(50% - 12px); }

    /* Obrázok a nadpis vedľa seba na polovicu, výhody pod nimi cez celú šírku. */
    #svc-why { margin: 40px 0 32px; }
    #svc-why .svc-why__top { display: flex; gap: 32px; align-items: center; }
    #svc-why .svc-why__top > * { flex: 1 1 50%; min-width: 0; }
    #svc-why .svc-why__top h2 { margin: 0; text-align: left; }
    #svc-why #rcimg img { max-width: 100%; }
    #svc-why #rcwrap { margin-top: 32px; }

    /* Autopožičovňa: fotka vľavo, parametre v dvoch stĺpcoch. */
    #listing .car-card { display: block; padding: 24px; column-gap: 24px; }
    #listing .car-card .hdl { order: unset; width: auto; margin: 8px 0; }
    #listing .car-card .hdl h3 { margin: 4px 0 0; font-size: 24px; }
    #listing .car-card img { width: 300px; height: 225px; float: left; margin-right: 24px; }
    #listing .car-card .btm { width: auto; padding: 16px 0 0; }
    #listing .car-card .btm .price { font-size: 24px; }
    #listing .car-card .params { flex-direction: row; margin: 0 0 16px; }
    #listing .car-card .params .params-1,
    #listing .car-card .params .params-2 { width: 50%; }
    #listing .car-card .params .param { padding: 4px 0; }
    #listing .car-card .params .param:nth-child(odd) { background: none; }
    #listing .car-card .params .param span { display: inline-block; margin-right: 8px; }
    #rent-why #whywrap { flex-wrap: nowrap; gap: 0 24px; }
    #rent-why #whywrap .item { flex: 1 1 0; }

    #terms { padding-top: 48px; }

    /* Detail auta: nadpis nad fotkou a obe v tmavej časti, ako na pôvodnom
       webe. Vpravo od nich je rezervačná karta, preto oboje drží šírku
       ľavého stĺpca. Predtým stála fotka vedľa nadpisu a na kartu už
       nezostalo miesto. */
    /* Od 768 px je fotka vždy 648 široká (strop obalu), takže polovica výšky
       je pevných 243 px a netreba ju počítať z okna. */
    #heading.has-photo { padding-bottom: calc(243px + 32px); }
    #heading.has-photo #hero { margin: 24px 0 0; }
    #car-photo { margin-bottom: 32px; }
    #mainparam #pricefrom .left img { width: 32px; height: 32px; }
    #mainparam #pricefrom .right { font-size: 22px; }
    #benefit ul { flex-direction: row; flex-wrap: wrap; column-gap: 16px; row-gap: 8px; }
    /* Dva stĺpce, nie tri: stĺpec s obsahom je na detaile auta 648 px široký
       a pri troch by sa „Pravidelný autorizovaný servis" lámal na tri riadky. */
    #benefit ul li { width: calc(50% - 8px); }

    #cennik .ptable th,
    #cennik .ptable td { padding: 12px 16px; }
    #cennik .ptable thead th { font-size: 13px; }
    #cennik .ptable tbody th,
    #cennik .ptable tbody td:last-child { font-size: 17px; }
    #cennik .ptable tbody td { font-size: 15px; }
    #more-cars .mini-card { flex: 1 1 calc(50% - 8px); }
}

@media (min-width: 1080px) {
    #svc-why { margin-top: 40px; margin-bottom: 80px; }
}