/* Písmo hlavičky (Vojto 6. 10. 2026): Predvolené písmo stránky z Nastavenia →
   Písma, kým nie je uložené, doterajší Open Sans (layouts/app.blade.php).
   :where = nulová špecifickosť - nastavenie z Backendu ju vždy prebije. */
:where(:root) {
    --font-hlavicka: "Open Sans", sans-serif;
}

/* ==========================================================================
   HLAVIČKA E-SHOPU (Trello uopmQTCi „Frontend - Úvodná stránka“, 28. 9. 2026)
   ==========================================================================
   Podľa návrhu z karty (layout WooCommerce eshop-dev.markdevelo.sk):
     horný pás    hlavná farba, biely text 16 px, ikony 18 px
     stredný pás  svetlosivý prechod, logo vľavo, vpravo vyhľadávanie,
                  Môj profil a košík s červenou bublinou
     spodný pás   hlavná farba, kategórie tučne bielou, oddelené čiarou;
                  po prejdení myšou megamenu cez celú šírku
   --farba-hlavna vkladá layouts/app.blade.php z Nastavenia → Farebnosť.
   Značky: components/layout/header.blade.php a spol.
   ========================================================================== */

/* Hlavička je vždy prilepená na vrch okna, obsah sa posúva pod ňou (karta
   uopmQTCi, 28. 9. 2026). Jej skutočnú výšku meria js/app.js do
   --vyska-hlavicky - od nej sa odsadzujú prilepené prvky stránky (filtre,
   súhrn košíka) a skok na kotvu. Záloha: 30 + 90 + 40 px. */
:root {
    --vyska-hlavicky: 160px;
}

.hl {
    --hl-hlavna: var(--farba-hlavna, #D69A2D);
    position: sticky;
    top: 0;
    z-index: 50;
    font-family: var(--font-hlavicka);
}

.hl-obal {
    max-width: var(--container-width, 1366px);
    margin: 0 auto;
    padding: 0 var(--space-4, 16px);
}

.hl-ikona {
    flex: none;
    width: 18px;
    height: 18px;
}

/* --- Horný pás --------------------------------------------------------------- */
.hl-horny {
    background: var(--hlavicka-infopas, var(--hl-hlavna));   /* Farebnosť → Infopás */
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 300;
}

/* Lišta Upraviť (úpravy na frontende) - odkaz v strede pásu. */
.hl-horny--upravit .hl-horny-obal {
    justify-content: center;
}

.hl-upravit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
}

.hl-upravit:hover {
    text-decoration: underline;
}

.hl-upravit-ikona {
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    -webkit-mask: url("/icons/upravit.svg") center / contain no-repeat;
    mask: url("/icons/upravit.svg") center / contain no-repeat;
}

.hl-horny-obal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 30px;
}

.hl-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hl-info-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.4s ease;   /* prelínanie textových informácií (app.js) */
}

.hl-info-text.je-skryvany {
    opacity: 0;
}

/* Text je HTML z editora - odseky nesmú pás rozťahovať. */
.hl-info-text p {
    display: inline;
    margin: 0;
}

.hl-info-text a,
.hl-kontakt-odkaz {
    color: #FFFFFF;
    text-decoration: none;
}

.hl-info-text a:hover,
.hl-kontakt-odkaz:hover {
    text-decoration: underline;
}

.hl-kontakt {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
}

.hl-kontakt-odkaz {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* --- Stredný pás -------------------------------------------------------------- */
.hl-stred {
    /* Prechod z Nastavenia → Farebnosť (Hlavička prechod hore / dole);
       --hlavicka-prechod je jeho stred (posuvník Prechod farieb, 50 % =
       rovnomerný). */
    background: linear-gradient(
        180deg,
        var(--hlavicka-hore, #F2F2F2) 0%,
        var(--hlavicka-prechod, 50%),
        var(--hlavicka-dole, #D6D6D6) 100%
    );
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 2;
}

/* Obrázok Pozadie hlavičky leží nad prechodom vo vlastnej vrstve, aby sa mu
   dala nastaviť priehľadnosť (posuvník Priehľadnosť pozadia). Veľkosť
   z posuvníka Veľkosť obrázku, zmenšený sa opakuje (Trello N2JudpPQ). */
.hl-stred::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hlavicka-obrazok, none) center / var(--hlavicka-obrazok-velkost, auto) repeat;
    opacity: var(--hlavicka-obrazok-nepriehladnost, 1);
    pointer-events: none;
}

.hl-stred > * {
    position: relative;
}

.hl-stred-obal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    height: 90px;   /* stredný pás 90 px (karta uopmQTCi, 28. 9. 2026) */
}

.hl-logo {
    display: inline-flex;
    align-items: center;
    color: #000000;
    font-size: 26px;
    font-weight: 700;
    text-decoration: none;
}

.hl-logo img {
    display: block;
    /* Pevná výška: logo v SVG bez rozmerov by inak malo nulovú šírku. */
    height: 80px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

.hl-nastroje {
    display: flex;
    align-items: center;
    gap: 22px;
}

.hl-ikona-odkaz {
    position: relative;
    display: inline-flex;
    color: #000000;
}

.hl-ikona-odkaz img,
.hl-ikona-odkaz svg {
    width: 36px;
    height: 36px;
}

/* Ikony Môj profil a košík sú v hlavičke biele (zadávateľ 28. 9. 2026) -
   súbory zo sady sú čierne, prefarbia sa filtrom. */
.hl-ikona-odkaz img {
    filter: brightness(0) invert(1);
}

.hl-bublina {
    position: absolute;
    top: -8px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
    background: #E30014;
    /* Biely okraj 1 px - bublina sa odlíši aj na červenom pozadí hlavičky
       (zadávateľ 28. 9. 2026). */
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    box-sizing: border-box;   /* 20 x 20 px vrátane okraja - pri 1 číslici kruh */
}

/* Vyhľadávanie s našepkávačom. */
.hl-hladanie {
    position: relative;
    width: 400px;
    max-width: 40vw;
}

.hl-hladanie input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 42px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 300;
    color: #000000;
    background: #F2F2F2;
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    outline: none;
}

.hl-hladanie input:focus {
    background: #FFFFFF;
    border-color: #999999;
}

.hl-lupa {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 20px;
    height: 20px;
    color: #9A9A9A;
    transform: translateY(-50%);
    pointer-events: none;
}

.hl-navrh {
    /* Našepkávač podľa grafiky karty r8I7saPW (29. 9. 2026): panel pod
       vyhľadávaním, zarovnaný na jeho pravý okraj a rozšírený doľava. */
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    width: min(1000px, calc(100vw - 32px));
    font-family: var(--font-hlavicka);   /* písmo hlavičky */
    font-weight: 400;
    padding: 20px 20px 24px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    color: #000000;
    text-align: left;
}

.hl-navrh[hidden] {
    display: none;
}

.hl-navrh.bez-lavej {
    grid-template-columns: minmax(0, 1fr);
}

.hl-navrh-vlavo {
    padding-right: 30px;
    border-right: 1px solid #CCCCCC;
}

.hl-navrh-vpravo {
    padding-left: 30px;
}

.hl-navrh.bez-lavej .hl-navrh-vpravo {
    padding-left: 0;
}

.hl-navrh a {
    color: #000000;
    text-decoration: none;
}

/* Nadpisy blokov - písmo hlavičky (Open Sans), tučne. */
.hl-navrh-nadpis {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.hl-navrh-vlavo .hl-navrh-nadpis + .hl-navrh-kategoria,
.hl-navrh-kategoria + .hl-navrh-kategoria {
    margin-top: 10px;
}

.hl-navrh-kategoria + .hl-navrh-nadpis {
    margin-top: 40px;
}

/* Kategória: rámček s obrázkom, názvom a sivou cestou v strome. */
.hl-navrh-kategoria {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #CCCCCC;
    border-radius: 8px;
}

.hl-navrh-kategoria img {
    flex: none;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.hl-navrh-texty {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hl-navrh-kat-nazov {
    font-size: 16px;
    line-height: 1.25;
}

.hl-navrh-cesta {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.25;
    color: #AAAAAA;
}

/* Značky: logá v rámčekoch vedľa seba. */
.hl-navrh-znacky {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hl-navrh-znacka {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 52px;
    padding: 6px;
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    font-size: 12px;
}

.hl-navrh-znacka img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Produkt: názov, pod ním sklad vľavo a cena s DPH vpravo, čiara pod. */
.hl-navrh-produkt {
    display: flex;
    align-items: center;
    padding: 8px 0 6px;
    border-bottom: 1px solid #CCCCCC;
}

/* Hlavný obrázok produktu - rámček ako pri kategórii, 10 px od textov. */
.hl-navrh-foto {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    background: #FFFFFF;
}

.hl-navrh-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hl-navrh-udaje {
    display: block;
    flex: 1;
    min-width: 0;
}

.hl-navrh-produkt + .hl-navrh-produkt {
    margin-top: 6px;
}

.hl-navrh-nazov {
    display: block;
    font-size: 15px;
    line-height: 1.3;
}

.hl-navrh-riadok {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.hl-navrh-sklad {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #E4202A;
}

.hl-navrh-sklad.je-skladom {
    color: #6BAE2A;
}

.hl-navrh-sklad-ikona {
    width: 32px;
    height: 32px;
}

.hl-navrh-cena {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.hl-navrh-suma {
    font-size: 22px;
    font-weight: 700;
    color: #E4202A;
    white-space: nowrap;
}

.hl-navrh-dph {
    margin-top: 2px;
    font-size: 13px;
}

.hl-navrh .hl-navrh-vsetky {
    display: block;
    margin-top: 24px;
    font-size: 15px;
    text-align: center;
    color: var(--farba-hlavna, #E4202A);
}

.hl-navrh-produkt:hover .hl-navrh-nazov,
.hl-navrh-produkt.je-vybrany .hl-navrh-nazov,
.hl-navrh-kategoria:hover .hl-navrh-kat-nazov,
.hl-navrh-kategoria.je-vybrany .hl-navrh-kat-nazov,
.hl-navrh .hl-navrh-vsetky:hover,
.hl-navrh .hl-navrh-vsetky.je-vybrany {
    text-decoration: underline;
}

.hl-navrh-kategoria.je-vybrany,
.hl-navrh-znacka.je-vybrany,
.hl-navrh-znacka:hover {
    border-color: #7F7F7F;
}

.hl-navrh-ziadne {
    grid-column: 1 / -1;
    font-size: 15px;
    color: #7F7F7F;
}

@media (max-width: 1023px) {
    /* Na užšej obrazovke je pole vyhľadávania úzke - panel sa preto
       pripne k okrajom okna pod hlavičkou, nie k poľu. */
    .hl-navrh {
        position: fixed;
        top: calc(var(--vyska-hlavicky, 160px) + 8px);
        left: 16px;
        right: 16px;
        width: auto;
        grid-template-columns: minmax(0, 1fr);
        max-height: calc(100vh - var(--vyska-hlavicky, 160px) - 24px);
        overflow-y: auto;
    }

    .hl-navrh-vlavo {
        padding: 0 0 20px;
        border-right: 0;
        border-bottom: 1px solid #CCCCCC;
        margin-bottom: 20px;
    }

    .hl-navrh-vpravo {
        padding-left: 0;
    }
}

/* --- Prihlasovacia roletka pod ikonou Môj profil (Trello pEz6Llho, 29. 9. 2026) --- */
.hl-profil {
    position: relative;
    display: inline-flex;
}

.hl-profil-tlacidlo {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.hl-prihl {
    position: absolute;
    top: calc(100% + 14px);
    right: -80px;
    z-index: 60;
    display: flex;
    width: 600px;
    overflow: hidden;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    font-family: var(--font-hlavicka);   /* písmo hlavičky */
    font-weight: 400;
    color: #000000;
    text-align: left;
}

.hl-prihl[hidden] {
    display: none;
}

.hl-prihl-cast {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.hl-prihl-registracia {
    background: #F2F2F2;
}

.hl-prihl-nadpis {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.hl-prihl-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}

.hl-prihl-chyba {
    margin: 0;
    font-size: 14px;
    color: #E4202A;
}

/* Zabudnuté heslo (pEz6Llho, 29. 9. 2026): prepínané časti a hláška o odoslaní. */
.hl-prihl-cast[hidden] {
    display: none;
}

.hl-prihl-ok {
    margin: 0;
    font-size: 14px;
    color: #4E7F14;
}

.hl-prihl-pole {
    position: relative;
    display: block;
}

.hl-prihl-pole input {
    width: 100%;
    height: 45px;
    padding: 0 18px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    background: #FFFFFF;
    color: #000000;
    font: inherit;
    font-size: 14px;
}

.hl-prihl-heslo input {
    padding-right: 44px;
}

.hl-prihl-oko {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: #555555;
    -webkit-mask: var(--hl-oko) center / contain no-repeat;
    mask: var(--hl-oko) center / contain no-repeat;
    transform: translateY(-50%);
    cursor: pointer;
}

.hl-prihl-oko.je-zobrazene {
    background: #000000;
}

.hl-prihl-zapamatat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #7F7F7F;
    cursor: pointer;
}

.hl-prihl-zapamatat input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #000000;
}

/* Tlačidlá: farba a písmo z Nastavení (.btn), ikona prefarbená na text. */
.hl-prihl .hl-prihl-tlacidlo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    height: 48px;
    padding: 0 20px;
    border-radius: 6px;
    text-decoration: none;
}

.hl-prihl-ikona {
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--hl-ikona) center / contain no-repeat;
    mask: var(--hl-ikona) center / contain no-repeat;
}

.hl-prihl-zabudol {
    align-self: center;
    text-decoration: underline;
}

.hl-prihl-vyhody {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    line-height: 1.15;
}

.hl-prihl-vyhody li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hl-prihl-vyhody img {
    flex: none;
    width: 24px;
    height: 24px;
}

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

@media (max-width: 767px) {
    .hl-prihl {
        position: fixed;
        top: calc(var(--vyska-hlavicky, 160px) + 8px);
        left: 16px;
        right: 16px;
        width: auto;
        flex-direction: column;
        max-height: calc(100vh - var(--vyska-hlavicky, 160px) - 24px);
        overflow-y: auto;
    }
}

/* --- Malý košík pod ikonou košíka (Trello 937qIYUq, 29. 9. 2026) ------------- */
.hl-kosik-obal {
    position: relative;
    display: inline-flex;
}

.hl-mk {
    position: absolute;
    top: calc(100% + 14px);
    right: -20px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 380px;
    padding: 20px;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    font-family: var(--font-hlavicka);   /* písmo hlavičky */
    font-weight: 400;
    color: #000000;
    text-align: left;
}

.hl-mk[hidden] {
    display: none;
}

.hl-mk-polozky {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 50vh;
    margin: 0;
    padding: 0 0 18px;
    overflow-y: auto;
    border-bottom: 1px solid #DDDDDD;
    list-style: none;
}

.hl-mk-polozka {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hl-mk-obrazok {
    flex: none;
    width: 48px;
    height: 48px;
}

.hl-mk-obrazok img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hl-mk-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.hl-mk-kod {
    font-size: 12px;
    color: #6E6E6E;
}

.hl-mk-nazov {
    font-size: 14px;
    line-height: 1.25;
    color: #000000;
    text-decoration: none;
}

.hl-mk-nazov:hover {
    text-decoration: underline;
}

.hl-mk-cena {
    margin-top: 2px;
    font-size: 20px;
    font-weight: 700;
    color: #E4202A;
}

.hl-mk-pocet {
    font-size: 14px;
    color: #000000;
}

.hl-mk-dph {
    font-size: 11px;
    color: #000000;
}

.hl-mk-odstranit {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.hl-mk-odstranit img {
    width: 100%;
    height: 100%;
}

.hl-mk-medzisucet {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
}

.hl-mk-medzisucet small {
    font-size: 14px;
}

.hl-mk-doprava {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px 6px 6px;
    border: 2px solid #80BA3A;
    border-radius: 30px;
    background: #F2FBC9;
    font-size: 15px;
    color: #4D4D4D;
}

.hl-mk-doprava--chyba {
    border-color: #DDDDDD;
    background: #F2F2F2;
}

.hl-mk-doprava-ikona {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #80BA3A;
}

.hl-mk-doprava-ikona img {
    width: 24px;
    height: 24px;
}

.hl-mk-tlacidla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hl-mk-tlacidlo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
}

.hl-mk-tlacidlo img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.hl-mk-tlacidlo--pokladna {
    background: #CCCCCC;
}

.hl-mk-tlacidlo--kosik {
    background: #E4202A;
}

.hl-mk-tlacidlo:hover {
    opacity: 0.9;
}

@media (max-width: 767px) {
    .hl-mk {
        position: fixed;
        top: calc(var(--vyska-hlavicky, 160px) + 8px);
        left: 16px;
        right: 16px;
        width: auto;
        max-height: calc(100vh - var(--vyska-hlavicky, 160px) - 24px);
        overflow-y: auto;
    }
}

/* --- Spodný pás - megamenu ---------------------------------------------------- */
.hl-menu {
    position: relative;
    background: var(--hlavicka-menu, var(--hl-hlavna));   /* Farebnosť → Menu pozadie */
}

.hl-menu-zoznam {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hl-menu-polozka {
    flex: 1 1 auto;
    display: flex;
}

.hl-menu-odkaz {
    display: flex;
    align-items: center;
    /* Text vždy na stred medzi oddeľovačmi - položky sa naťahujú na celý
       riadok (Vojto 30. 9. 2026). */
    justify-content: center;
    text-align: center;
    width: 100%;
    /* Spodný pás 40 px (zadanie 28. 9. 2026): 28 + 2 x 6 px okraj, aby
       oddeľovač medzi položkami nešiel od kraja po kraj. */
    min-height: 28px;
    margin: 6px 0;
    /* 16 px - s položkou Značky (karta XxiKNngl) sa všetky zmestia do riadku. */
    padding: 0 16px;
    white-space: nowrap;
    /* Nastavenia → Písma → Menu položka hlavička (karta eZ4Su0qy, 29. 9.
       2026 20:34); predvolene Open Sans 16 px Bold biele. */
    font-family: var(--pismo-menu_hlavicka-rodina, inherit);
    font-size: var(--pismo-menu_hlavicka-velkost, 16px);
    font-weight: var(--pismo-menu_hlavicka-vaha, 700);
    line-height: 1.15;
    color: var(--pismo-menu_hlavicka-farba, #FFFFFF);
    text-decoration: none;
    border-right: 1px solid rgba(0, 0, 0, 0.55);
}

/* Za poslednou položkou (Značky) oddeľovač nie je (zadávateľ 28. 9. 2026). */
.hl-menu-polozka:last-child > .hl-menu-odkaz {
    border-right: 0;
}

.hl-menu-polozka:hover > .hl-menu-odkaz,
.hl-menu-polozka.je-otvorene > .hl-menu-odkaz {
    text-decoration: underline;
}

.hl-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 55;
    display: none;
    padding: 26px 0 20px;   /* spodný odsadok 20 px (zadávateľ 28. 9. 2026) */
    background: #FFFFFF;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

/* Megamenu sa otvára klikom na položku, nie prejdením myšou (zadávateľ
   28. 9. 2026) - triedu je-otvorene prepína js/app.js. */
.hl-menu-polozka.je-otvorene > .hl-mega {
    display: block;
}

/* Najviac polovica výšky okna pri každom rozlíšení; dlhší obsah sa posúva
   kolieskom myši (komentár karty uopmQTCi, 28. 9. 2026 17:59). Posúva sa len
   vnútro - horný aj spodný odsadok panela (26 / 20 px) ostávajú viditeľné
   stále (zadávateľ 28. 9. 2026). */
.hl-mega {
    max-height: 50vh;
    overflow: hidden;
}

.hl-mega .hl-mega-obal {
    max-height: calc(50vh - 46px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.hl-mega-obal {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px 30px;
}

/* Stĺpec podľa grafiky: ikona 70 x 70 vľavo, vedľa názov a zoznam. */
.hl-mega-stlpec {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Biela plocha okolo ikony 5 px, ikona 52 px (komentár 28. 9. 18:03). */
.hl-mega-ikona {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background: #FFFFFF;
}

.hl-mega-ikona img {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.hl-mega-obsah {
    min-width: 0;
}

.hl-mega-nadpis {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #000000;
    text-decoration: none;
}

.hl-mega-pocet {
    font-size: 13px;
    font-weight: 400;
    color: #333333;
}

.hl-mega ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hl-mega li a {
    display: block;
    padding: 3px 0;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
}

.hl-mega a:hover {
    color: var(--hl-hlavna);
    text-decoration: underline;
}

/* Po piatej podkategórii sa ďalšie skryjú; „Zobraziť viac“ ich ukáže. */
.hl-mega-dalsia {
    display: none;
}

.hl-mega-stlpec.je-rozbaleny .hl-mega-dalsia {
    display: list-item;
}

.hl-mega-stlpec.je-rozbaleny .hl-mega-viac {
    display: none;
}

.hl-mega-viac {
    /* Rovnaký riadok a odstup ako položky 3. úrovne (zadávateľ 28. 9. 2026). */
    display: block;
    margin-top: 0;
    padding: 3px 0;
    border: 0;
    background: none;
    color: #1A0DAB;
    font: inherit;
    font-size: 13px;
    line-height: 22px;   /* riadok 28 px ako položka 3. úrovne - až za font */
    font-weight: 700;
    cursor: pointer;
}

.hl-mega-viac:hover {
    text-decoration: underline;
}

/* Pri otvorenom megamenu sa obsah stránky pod hlavičkou stmaví na 80 %
   čiernej - pozornosť ostane na megamenu (komentár 28. 9. 17:56). Prekrytie
   neprijíma myš, takže odchod z megamenu ho hneď zruší. */
.hl-menu::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--vyska-hlavicky, 160px);
    z-index: 40;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.hl-menu:has(.ma-podmenu.je-otvorene)::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;   /* klik na stmavenú plochu menu zavrie, neklikne pod ňu */
    transition: opacity 0.2s ease, visibility 0s;
}

/* --- Tablet a mobil ------------------------------------------------------------- */
@media (max-width: 1023px) {
    .hl-stred-obal {
        flex-wrap: wrap;
        height: auto;
        min-height: 0;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .hl-nastroje {
        flex: 1 1 100%;
    }

    .hl-hladanie {
        flex: 1;
        width: auto;
        max-width: none;
    }

    .hl-menu-zoznam {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .hl-menu-odkaz {
        white-space: nowrap;
        min-height: 48px;
    }

    .hl-mega {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hl-horny-obal {
        flex-wrap: wrap;
        font-size: 14px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .hl-kontakt {
        margin-left: 0;
        gap: 14px;
    }

    .hl-logo img {
        height: 52px;
        max-width: 170px;
    }
}

/* ==========================================================================
   MOBILNÁ VERZIA (layouty Vojto 1. 10. 2026) - do 767 px
   --------------------------------------------------------------------------
   Horný pás len s informáciou, hlavička = logo + „PRODUKTY“ (otvorí menu),
   kategórie, vyhľadávanie, profil a košík sú v mobilnom menu a v spodnej
   lište (components/layout/mobilne-menu). Správanie: js/app.js (data-mm-*).
   ========================================================================== */
.hl-m-produkty,
.mm,
.mm-pozadie,
.mm-lista {
    display: none;
}

@media (max-width: 767px) {
    body {
        padding-bottom: 60px;   /* spodná lišta */
    }

    .hl-kontakt,
    .hl-menu {
        display: none !important;
    }

    .hl-horny-obal {
        font-size: 15px;
    }

    .hl-stred-obal {
        flex-wrap: nowrap;
        height: 80px;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .hl-logo img {
        height: 46px;
        max-width: 170px;
    }

    /* Nástroje hlavičky sa nezobrazujú, prihlasovacia roletka (pevne
       umiestnená) však ostáva - otvára ju ikona profilu v spodnej lište. */
    .hl-nastroje {
        position: absolute;
        width: 0;
        height: 0;
        overflow: visible;
    }

    .hl-nastroje .hl-hladanie,
    .hl-nastroje .hl-profil-tlacidlo,
    .hl-nastroje .hl-kosik-obal {
        display: none !important;
    }

    .hl-m-produkty {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
        padding: 8px 0;
        border: 0;
        background: none;
        font: inherit;
        font-size: 18px;
        color: #FFFFFF;
        cursor: pointer;
    }

    .hl-m-produkty > span {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .hl-m-produkty svg {
        width: 20px;
        height: 20px;
    }

    .hl-m-otvorene,
    body.mm-otvorene .hl-m-zatvorene {
        display: none !important;
    }

    body.mm-otvorene .hl-m-otvorene {
        display: inline-flex !important;
        color: rgba(255, 255, 255, 0.55);
    }

    body.mm-otvorene .hl-m-otvorene svg {
        color: #E30014;
    }

    body.mm-otvorene {
        overflow: hidden;
    }

    /* --- Panel menu medzi hlavičkou a spodnou lištou --------------------- */
    .mm {
        position: fixed;
        top: var(--vyska-hlavicky, 110px);
        right: 0;
        bottom: 60px;
        left: 0;
        z-index: 48;
        display: block;
        padding: 20px 20px 30px;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 0 0 16px 16px;
        background: #FFFFFF;
        font-family: var(--font-hlavicka);
    }

    .mm[hidden],
    .mm-pozadie[hidden] {
        display: none;
    }

    .mm-pozadie {
        position: fixed;
        inset: 0;
        z-index: 47;
        display: block;
        background: rgba(0, 0, 0, 0.45);
    }

    .mm-hladanie {
        position: relative;
        margin-bottom: 10px;
    }

    .mm-lupa {
        position: absolute;
        top: 50%;
        left: 12px;
        width: 22px;
        height: 22px;
        color: #BBBBBB;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .mm-hladanie input {
        width: 100%;
        height: 44px;
        padding: 0 14px 0 44px;
        border: 1px solid #D5D5D5;
        border-radius: 10px;
        background: #F0F0F0;
        font: inherit;
        font-size: 17px;
        color: #000000;
    }

    .mm-hladanie input::placeholder {
        color: #BBBBBB;
    }

    .mm-kategorie,
    .mm-podkategorie {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mm-kategorie {
        padding: 0 16px;
    }

    .mm-riadok {
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid #CCCCCC;
    }

    .mm-odkaz {
        display: flex;
        flex: 1;
        align-items: center;
        gap: 12px;
        min-width: 0;
        padding: 10px 0;
        font-size: 17px;
        color: #000000;
        text-decoration: none;
    }

    .mm-odkaz img {
        flex: none;
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .mm-sipka {
        flex: none;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .mm-sipka::before {
        content: "";
        display: block;
        width: 11px;
        height: 11px;
        margin: 6px auto 0;
        border-right: 3px solid #000000;
        border-bottom: 3px solid #000000;
        transform: rotate(45deg);
        transition: transform 0.15s ease;
    }

    .mm-sipka[aria-expanded="true"]::before {
        margin-top: 12px;
        transform: rotate(-135deg);
    }

    .mm-podkategorie {
        padding: 10px 0 6px 36px;
    }

    .mm-podkategorie .mm-odkaz {
        padding: 12px 0;
    }

    .mm-poradit {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        margin-top: 30px;
        text-align: center;
    }

    .mm-poradit p {
        margin: 0 0 10px;
        font-size: 30px;
        font-weight: 300;
        line-height: 1.2;
        color: #6E6E6E;
    }

    .mm-poradit a {
        font-size: 17px;
        color: #000000;
        text-decoration: none;
    }

    /* --- Spodná lišta: menu / kontakt / profil / košík -------------------- */
    .mm-lista {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 49;
        display: flex;
        height: 60px;
        border-top: 1px solid #DDDDDD;
        background: #FFFFFF;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    }

    .mm-lista-tl {
        position: relative;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-left: 1px solid #DDDDDD;
        background: none;
        color: #000000;
        cursor: pointer;
    }

    .mm-lista-tl:first-child {
        border-left: 0;
    }

    .mm-lista-tl img,
    .mm-lista-tl svg {
        width: 34px;
        height: 34px;
    }

    .mm-ikona-zavriet,
    body.mm-otvorene .mm-ikona-menu {
        display: none;
    }

    body.mm-otvorene .mm-ikona-zavriet {
        display: block;
        color: #E30014;
    }

    .mm-bublina {
        position: absolute;
        top: 6px;
        left: calc(50% + 8px);
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 10px;
        background: #E30014;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        color: #FFFFFF;
        text-align: center;
    }
}

/* Menu prihláseného zákazníka (Vojto 6. 10. 2026): úzka roletka, položky
   s ikonou 32 px a textom, oddelené tenkou čiarou. */
.hl-prihl:has(.hl-ucet-menu) {
    width: 330px;
    right: 0;
}

.hl-ucet-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 20px;
}

.hl-ucet-menu form {
    margin: 0;
}

.hl-ucet-polozka {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 60px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #DDDDDD;
    background: none;
    font: inherit;
    font-size: 17px;
    color: #000000;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.hl-ucet-menu form .hl-ucet-polozka {
    border-bottom: 0;
}

.hl-ucet-polozka img {
    flex: none;
    width: 32px;
    height: 32px;
}

.hl-ucet-polozka:hover span,
.hl-ucet-polozka.je-aktivna span {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .hl-prihl:has(.hl-ucet-menu) {
        width: auto;
    }
}