/**
 * 2026-003 Atelier - hlavicka (komponenta hlavicka, varianta default). Markup hlavicka.latte,
 * komponenty/mega-menu-atelier.latte, hlavicka--checkout.latte. Navrh: 01-Homepage-desktop / -mobil,
 * 06-Stavy (01 mega menu, 02 hledani, 03 sticky + jazyk / mena + pokladna, 04 mobil drawer).
 * Bez stinu; linky --tpl-header-line, Vyprodej --tpl-header-sale (Noir tmava hlavicka, Pastel sekundarni).
 */

#hlavicka.at-hd {
    position: relative;
    z-index: 50;
    background: var(--tpl-header-bg);
    color: var(--tpl-header-text);
}
.at-ico { display: block; width: 22px; height: 22px; flex: 0 0 auto; }
.at-ico--s { width: 16px; height: 16px; }
.at-ico--l { width: 24px; height: 24px; }

/* --- oznamovaci lista 36 (jadro .tpl-oznameni, barvy --tpl-annbar-*) --- */
.at-hd .tpl-oznameni { font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.at-hd .tpl-oznameni-in { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.at-hd .tpl-oznameni a.tpl-oznameni-text { text-decoration: none; }
.at-hd .tpl-oznameni a.tpl-oznameni-text:hover { text-decoration: underline; text-underline-offset: 3px; }
.at-hd .tpl-oznameni-zavrit { border-radius: 0; width: 44px; height: 36px; }
.at-hd .tpl-oznameni-zavrit:hover { background: transparent; opacity: .7; }

/* --- topbar 32 (secondary) --- */
.at-topbar {
    background: var(--tpl-topbar-bg);
    color: var(--tpl-topbar-text);
    font-size: 13px;
}
.at-topbar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 32px;
}
.at-topbar-info { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.at-topbar-info li + li::before { content: '·'; margin: 0 10px; }
.at-topbar-r { margin-left: auto; }

/* --- jazyk / mena (J-A8, .tpl-jm-*): kody 12 / 600 verzalky, panel 160 se stinem --- */
.at-hd .tpl-jazyk-mena { gap: 0; font-size: 12px; }
.at-hd .tpl-jm-skupina + .tpl-jm-skupina { display: flex; align-items: center; }
.at-hd .tpl-jm-skupina + .tpl-jm-skupina::before,
#bottom .tpl-jm-skupina + .tpl-jm-skupina::before { content: ""; width: 1px; height: 12px; margin: 0 10px; background: currentColor; opacity: .5; }
.at-hd .tpl-jm-tlacitko { min-height: 32px; padding: 0 2px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.at-hd .tpl-jm-sipka { width: 10px; height: 10px; }
.at-hd .tpl-jm-panel { min-width: 160px; padding: 0; border: 1px solid var(--tpl-line); border-radius: 0; background: var(--tpl-surface); color: var(--tpl-text); box-shadow: var(--tpl-shadow-pop); letter-spacing: 0; text-transform: none; }
.at-hd .tpl-jm-polozka { display: flex; justify-content: space-between; min-height: 44px; align-items: center; padding: 0 14px; border-radius: 0; font-size: 14px; }
.at-hd .tpl-jm-polozka:hover,
.at-hd .tpl-jm-polozka:focus-visible { background: var(--tpl-secondary); color: var(--tpl-text); }
.at-hd .tpl-jm-polozka--aktivni { font-weight: 600; }

/* --- hlavni radek 88: [Hledat] [logo] [ikony] --- */
.at-hd-pruh { position: relative; background: var(--tpl-header-bg); }
#hlavicka_obsah.at-hd-main {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    min-height: 88px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    background: none;
    max-width: calc(var(--tpl-max-width) + 2 * var(--tpl-gutter));
}
.at-hd-l { display: flex; align-items: center; gap: 4px; min-width: 0; }
.at-hd-c { display: flex; justify-content: center; min-width: 0; }
.at-hd-r { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.at-hd-moduly[hidden] { display: none; }

.at-hd-ikona,
a.at-hd-ikona,
button.at-hd-ikona {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tpl-header-text);
    cursor: pointer;
}
a.at-hd-ikona:hover,
button.at-hd-ikona:hover { color: var(--tpl-header-text); opacity: .75; }
.at-hd-l .at-hd-burger,
.at-hd-r .at-hd-lupa { display: none; }
.at-hd-hledat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tpl-header-text);
    font: 600 13px/1 var(--tpl-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
}
.at-hd-hledat:hover { opacity: .75; }

/* odznaky poctu 16 px (radius 8): srdce v akcentu, kosik v cta (Noir: krouzek v barve hlavicky) */
.at-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    font: 700 10px/1 var(--tpl-font);
    letter-spacing: 0;
    box-shadow: 0 0 0 2px var(--tpl-header-bg);
}
.at-badge[hidden] { display: none; }
.at-badge--srdce { background: var(--tpl-accent); color: var(--tpl-accent-text); }
.at-badge--kosik { background: var(--tpl-header-cart-bg); color: var(--tpl-cta-text); }

/* --- logo: obrazek max 240 x 56 (na vysku 64), textovy logotyp Playfair 500 verzalky .18em --- */
.at-logo,
a.at-logo {
    display: inline-flex;
    align-items: center;
    color: var(--tpl-header-text);
    text-decoration: none;
    white-space: nowrap;
}
.at-logo:hover { color: var(--tpl-header-text); text-decoration: none; }
.at-logo--text {
    font-family: var(--tpl-font-head);
    font-weight: var(--tpl-head-weight);
    font-synthesis: none;
    line-height: 1;
    letter-spacing: .18em;
    margin-right: -.18em;
    text-transform: uppercase;
}
.at-logo--hlavicka { font-size: 30px; }
.at-logo--drawer { font-size: 18px; color: var(--tpl-text); }
.at-logo--drawer:hover { color: var(--tpl-text); }
.at-logo--obrazek img { display: block; max-width: 240px; max-height: 56px; width: auto; height: auto; }
.at-logo--drawer.at-logo--obrazek img { max-width: 160px; max-height: 36px; }

/* --- hledani pres cely hlavni radek (06.02) --- */
.at-hd-search { display: none; }
#hlavicka.at-search-open .at-hd-search {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 var(--tpl-gutter);
    background: var(--tpl-header-bg);
    border-bottom: 1px solid var(--tpl-header-line);
}
.at-hd-search-ico { color: var(--tpl-header-text); }
.at-hd-search .tpl-header-search { flex: 1 1 auto; width: auto; margin: 0; padding: 0; background: none; }
#hlavicka .at-hd-search form { position: relative; display: flex; align-items: center; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#hlavicka .at-hd-search input.input_text,
#hlavicka .at-hd-search input[type="text"],
#hlavicka .at-hd-search input[type="search"] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--tpl-header-text);
    font: 400 18px/1 var(--tpl-font);
}
#hlavicka .at-hd-search input::placeholder { color: var(--tpl-header-text); opacity: .6; }
#hlavicka .at-hd-search input.submit,
#hlavicka .at-hd-search input[type="submit"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; }

/* --- menu 48 na stred mezi linkami --- */
.at-nav { background: var(--tpl-nav-bg); border-top: 1px solid var(--tpl-header-line); border-bottom: 1px solid var(--tpl-header-line); }
.at-nav-ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 36px;
    margin: 0 auto;
    list-style: none;
}
.at-nav-li { position: static; }
.at-nav-a,
a.at-nav-a {
    display: block;
    padding: 15px 0 13px;
    border-bottom: 2px solid transparent;
    color: var(--tpl-nav-text);
    font: 600 13px/18px var(--tpl-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.at-nav-a:hover,
.at-nav-li--on > .at-nav-a,
.at-nav-li.is-open > .at-nav-a { color: var(--tpl-nav-text); border-bottom-color: var(--tpl-nav-text); text-decoration: none; }
a.at-nav-a--akcent,
a.at-nav-a--akcent:hover { color: var(--tpl-header-sale); }
.at-nav-li--on > a.at-nav-a--akcent,
a.at-nav-a--akcent:hover { border-bottom-color: var(--tpl-header-sale); }

/* --- mega menu (06.01): pozadi stranky, padding 40, linka dole, bez stinu --- */
.at-mega {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    background: var(--tpl-body-bg);
    color: var(--tpl-text);
    border-bottom: 1px solid var(--tpl-line);
    text-align: left;
}
.at-nav-li.is-open > .at-mega,
.at-nav-li:focus-within > .at-mega { display: block; }
html:not(.at-js) .at-nav-li--panel:hover > .at-mega { display: block; }
.at-mega-in { display: flex; justify-content: space-between; gap: 40px; padding-top: 40px; padding-bottom: 40px; }
.at-mega-sloupce { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 190px); gap: 24px; }
.at-mega-nadpis,
a.at-mega-nadpis {
    display: block;
    margin-bottom: 14px;
    font: 600 12px/1.4 var(--tpl-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tpl-text);
}
.at-mega-sl ul { margin: 0; padding: 0; list-style: none; }
.at-mega-sl li a { display: block; padding: 4px 0; font-size: 14px; line-height: 20px; color: var(--tpl-text); }
.at-mega-sl li a:hover { color: var(--tpl-link-hover); }
a.at-mega-vse { margin-top: 2px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.at-mega-sl li a.at-mega-akcent { color: var(--tpl-sale-price); }
.at-mega-fotky { display: flex; gap: 24px; flex: 0 0 auto; }
.at-mega-foto,
a.at-mega-foto { display: flex; flex-direction: column; width: 192px; color: var(--tpl-text); text-decoration: none; }
.at-mega-foto-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tpl-surface-2); }
.at-mega-foto-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.at-mega-foto:hover img { transform: scale(1.02); }
.at-mega-foto-nazev { margin-top: 12px; font-size: 14px; font-weight: 600; }
.at-mega-foto-cta { align-self: flex-start; margin-top: 6px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font: 600 12px/1.2 var(--tpl-font); letter-spacing: .14em; text-transform: uppercase; }

/* --- radek "‹ Kategorie" na detailu (jen mobil) a drawer (jen mobil) --- */
.at-zpet-radek,
.at-drawer,
.at-drawer-overlay { display: none; }

/* --- sticky (hd_sticky = ano: body.tpl-hd-sticky po 120 px): jeden radek 64 - logo vlevo, menu uprostred, lupa srdce kosik --- */
body.tpl-hd-sticky #hlavicka.at-hd { min-height: var(--at-hd-h, auto); }
body.tpl-hd-sticky .at-hd-pruh {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    min-height: var(--at-hd-sticky);
    padding: 0 var(--tpl-gutter);
    border-bottom: 1px solid var(--tpl-header-line);
}
body.tpl-hd-sticky #hlavicka_obsah.at-hd-main { display: contents; }
body.tpl-hd-sticky .at-hd-l { display: none; }
body.tpl-hd-sticky .at-hd-c { grid-column: 1; grid-row: 1; justify-content: flex-start; }
body.tpl-hd-sticky .at-nav { grid-column: 2; grid-row: 1; border: 0; background: none; }
body.tpl-hd-sticky .at-hd-r { grid-column: 3; grid-row: 1; }
body.tpl-hd-sticky .at-hd-r .at-hd-lupa { display: inline-flex; }
body.tpl-hd-sticky .at-hd-r .at-hd-ucet { display: none; }
body.tpl-hd-sticky .at-logo--hlavicka { font-size: 20px; }
body.tpl-hd-sticky .at-logo--hlavicka.at-logo--obrazek img { max-height: 36px; }
body.tpl-hd-sticky .at-nav-ul { column-gap: 28px; padding: 0; }
body.tpl-hd-sticky .at-nav-a,
body.tpl-hd-sticky a.at-nav-a { padding: 22px 0 20px; font-size: 12px; }
body.tpl-hd-sticky #hlavicka.at-search-open .at-hd-search { grid-column: 1 / -1; grid-row: 1; position: static; padding: 0; border: 0; }
body.tpl-hd-sticky #hlavicka.at-search-open .at-hd-c,
body.tpl-hd-sticky #hlavicka.at-search-open .at-nav,
body.tpl-hd-sticky #hlavicka.at-search-open .at-hd-r { visibility: hidden; }

/* ================================================================
   Tablet 769-1100: mensi mezery menu, mega menu bez fotek, sticky bez menu
   ================================================================ */
@media (max-width: 1100px) {
    .at-nav-ul { column-gap: 24px; }
    .at-nav-a,
    a.at-nav-a { font-size: 12px; letter-spacing: .1em; }
    .at-mega-fotky { display: none; }
    body.tpl-hd-sticky .at-nav { visibility: hidden; }
}

/* ================================================================
   Mobil <= 768 px (01-Homepage-mobil, 06.04)
   ================================================================ */
@media (max-width: 768px) {
    .at-topbar { font-size: 14px; }
    .at-topbar-in { justify-content: center; min-height: 32px; }
    .at-topbar-r { display: none; }
    .at-topbar-info { justify-content: center; text-align: center; }
    .at-topbar-info li ~ li { display: none; }

    .at-hd-pruh { border-bottom: 1px solid var(--tpl-header-line); }
    #hlavicka_obsah.at-hd-main { gap: 4px; min-height: 56px; }
    .at-hd-l { margin-left: -12px; gap: 0; }
    .at-hd-r { margin-right: -12px; gap: 0; }
    .at-hd-l .at-hd-burger { display: inline-flex; }
    .at-hd-hledat { justify-content: center; width: 44px; }
    .at-hd-hledat-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .at-hd-r .at-hd-ucet,
    .at-hd-lupa { display: none; }
    .at-logo--hlavicka { font-size: 19px; letter-spacing: .16em; margin-right: -.16em; }
    .at-logo--hlavicka.at-logo--obrazek img { max-width: 140px; max-height: 36px; }
    #hlavicka.at-search-open .at-hd-search { padding: 0 4px 0 var(--tpl-gutter); border-bottom-color: var(--tpl-primary); }
    #hlavicka .at-hd-search input.input_text,
    #hlavicka .at-hd-search input[type="text"] { height: 54px; font-size: 16px; }
    .at-nav { display: none; }

    /* sticky = cely radek 56 */
    body.tpl-hd-sticky .at-hd-pruh { display: block; padding: 0; min-height: 56px; }
    body.tpl-hd-sticky #hlavicka_obsah.at-hd-main { display: grid; }
    body.tpl-hd-sticky .at-hd-l { display: flex; }
    body.tpl-hd-sticky .at-hd-l,
    body.tpl-hd-sticky .at-hd-c,
    body.tpl-hd-sticky .at-hd-r { grid-column: auto; grid-row: auto; }
    body.tpl-hd-sticky .at-hd-c { justify-content: center; }
    body.tpl-hd-sticky .at-hd-r .at-hd-lupa { display: none; }
    body.tpl-hd-sticky .at-logo--hlavicka { font-size: 19px; }
    body.tpl-hd-sticky #hlavicka.at-search-open .at-hd-search { position: absolute; padding: 0 4px 0 var(--tpl-gutter); }
    body.tpl-hd-sticky #hlavicka.at-search-open .at-hd-c,
    body.tpl-hd-sticky #hlavicka.at-search-open .at-hd-r { visibility: visible; }

    /* "‹ Svetry a pleteniny" misto drobecku na detailu */
    .at-zpet-radek { display: block; border-bottom: 1px solid var(--tpl-line); background: var(--tpl-body-bg); }
    a.at-zpet { display: flex; align-items: center; gap: 4px; min-height: 44px; color: var(--tpl-text); font-size: 14px; }
    a.at-zpet .at-ico { width: 18px; height: 18px; margin-left: -4px; }

    /* drawer zleva 100 % (06.04): zalozky, seznam 52, 2. uroven zprava, fotky kolekci, dole ucet / oblibene / kontakt */
    .at-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
        width: 100%;
        overflow: hidden;
        background: var(--tpl-surface);
        color: var(--tpl-text);
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform .25s ease, visibility .25s;
    }
    .at-drawer-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--tpl-overlay); }
    #tpl-menu-toggle:checked ~ #hlavicka .at-drawer { transform: none; visibility: visible; }
    #tpl-menu-toggle:checked ~ #hlavicka .at-drawer-overlay { display: block; }
    body:has(#tpl-menu-toggle:checked) { overflow: hidden; }
    .at-drawer-hl {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px;
        padding: 0 4px 0 var(--tpl-gutter);
        border-bottom: 1px solid var(--tpl-line);
    }
    .at-drawer-x { color: var(--tpl-text); }
    .at-drawer-zalozky { display: flex; border-bottom: 1px solid var(--tpl-line); }
    .at-drawer-zalozka {
        flex: 1 1 0;
        min-height: 48px;
        padding: 0 6px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: none;
        color: var(--tpl-text-light);
        font: 600 13px/1.2 var(--tpl-font);
        letter-spacing: .12em;
        text-transform: uppercase;
        cursor: pointer;
    }
    .at-drawer-zalozka.is-on { color: var(--tpl-text); border-bottom-color: var(--tpl-primary); }
    .at-drawer-telo { position: relative; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
    .at-js .at-drawer-panel:not(.is-on) { display: none; }
    .at-drawer-seznam { margin: 0; padding: 0 var(--tpl-gutter); list-style: none; }
    .at-drawer-seznam > li { border-bottom: 1px solid var(--tpl-line); }
    a.at-dr-i {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 52px;
        color: var(--tpl-text);
        font-size: 16px;
    }
    a.at-dr-i .at-ico { color: var(--tpl-text-light); }
    a.at-dr-i:not([data-at-dr-otevrit]) .at-ico { display: none; }
    a.at-dr-i--vse { font-weight: 600; }
    a.at-dr-i--l1 { font-weight: 600; }
    a.at-dr-i--akcent { color: var(--tpl-sale-price); font-weight: 400; }
    .at-drawer-fotky { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px var(--tpl-gutter) 24px; }
    a.at-drawer-foto { display: flex; flex-direction: column; gap: 8px; color: var(--tpl-text); font-size: 14px; font-weight: 600; }
    .at-drawer-foto-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tpl-surface-2); }
    .at-drawer-foto-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .at-drawer-l2 {
        position: absolute;
        inset: 0;
        z-index: 2;
        overflow-y: auto;
        background: var(--tpl-surface);
        transform: translateX(100%);
        transition: transform .25s ease;
    }
    .at-drawer-l2.is-on { transform: none; }
    .at-drawer-l2[hidden] { display: none; }
    .at-drawer-l2-hl { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; border-bottom: 1px solid var(--tpl-line); }
    .at-dr-zpet {
        position: absolute;
        left: 4px;
        top: 4px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 44px;
        padding: 0 12px;
        border: 0;
        background: none;
        color: var(--tpl-text);
        font: 400 14px/1 var(--tpl-font);
        cursor: pointer;
    }
    .at-drawer-l2-nazev { font: 600 13px/1.2 var(--tpl-font); letter-spacing: .14em; text-transform: uppercase; }
    a.at-drawer-l2-foto { display: block; margin: 16px var(--tpl-gutter) 24px; color: var(--tpl-text); font-size: 13px; }
    a.at-drawer-l2-foto img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--tpl-surface-2); margin-bottom: 8px; }
    .at-drawer-dole {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 20px;
        padding: 8px var(--tpl-gutter) calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--tpl-secondary);
        color: var(--tpl-secondary-text);
        font-size: 14px;
    }
    .at-drawer-dole a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; }
    .at-drawer-lm { margin-left: auto; }
    .at-drawer-lm .tpl-jm-panel { top: auto; bottom: calc(100% + 4px); }
}

/* ================================================================
   Hlavicka pokladny (hlavicka--checkout.latte, 06.03 / 06.04): radek 64 + kroky 56 (mobil 56 + 48)
   ================================================================ */
.at-hd--checkout .at-hd-pruh { border-bottom: 1px solid var(--tpl-header-line); }
#hlavicka_obsah.at-hdc-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    max-width: calc(var(--tpl-max-width) + 2 * var(--tpl-gutter));
    background: none;
}
.at-logo--pokladna { font-size: 22px; }
.at-logo--pokladna.at-logo--obrazek img { max-height: 40px; }
a.at-hdc-zpet { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--tpl-header-text); font-size: 14px; }
.at-hdc-r { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--tpl-header-text); }
.at-hdc-r .at-ico { width: 18px; height: 18px; }
.at-hdc-kroky-pas { border-top: 1px solid var(--tpl-header-line); }
.at-hdc-kroky {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 48px;
    margin: 0 auto;
    list-style: none;
    font-size: 14px;
    color: var(--tpl-text-light);
}
.at-hd--checkout .at-hdc-kroky { color: var(--tpl-header-text); }
.at-hdc-krok { display: flex; align-items: center; min-height: 56px; border-bottom: 2px solid transparent; opacity: .75; }
.at-hdc-krok a { color: inherit; }
.at-hdc-krok--on { font-weight: 600; border-bottom-color: var(--tpl-header-text); opacity: 1; }
.at-hdc-cislo { margin-right: 8px; }
@media (max-width: 768px) {
    #hlavicka_obsah.at-hdc-main { min-height: 56px; gap: 8px; }
    .at-hdc-zpet-t,
    .at-hdc-bezpecne { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    a.at-hdc-zpet { width: 44px; justify-content: center; margin-left: -12px; }
    .at-logo--pokladna { font-size: 18px; }
    .at-hdc-kroky { gap: 0; padding: 0; }
    .at-hdc-krok { flex: 1 1 0; justify-content: center; min-height: 48px; font-size: 14px; }
}

/* jadro dava font-family vsem span / a (body, div, ... span) - logotyp a ikonove odkazy dedi pismo rodice */
.at-logo--text > span { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }