/* Květinářství Pytlík — hlavička a obsahové stránky */

/* Hlavička na jeden řádek: logo, odkazy, lupa a košík. Menu do horního pruhu
   přesouvá doplnky.js a přidá na body třídu až po přesunu; na mobilu se menu
   vrací dolů a ovládá hamburgerem. */
@media (min-width: 992px) {
    body:not(.search-window-visible) .header-top .search {
        display: none;
    }

    .navigation-buttons a[data-target="search"] {
        display: inline-block;
    }

    .pytlik-header-inline .header-top-wrapper {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    /* Logo i ikony si ze šablony berou třetinu šířky. #navigation má
       overflow: hidden, takže co se do zbytku nevejde, zmizí bez varování —
       proto tu obojí dostane šířku podle obsahu. */
    .pytlik-header-inline .header-top-wrapper .site-name {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 190px;
        /* Seznam odkazů si šířku dopočítává skriptem šablony přes celou hlavičku,
           takže leží i nad logem a bral mu kliknutí na úvodní stránku. */
        position: relative;
        z-index: 1001;
    }

    .pytlik-header-inline .header-top-wrapper .navigation-buttons {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .pytlik-header-inline .header-top-wrapper #navigation {
        flex: 1 1 auto !important;
        min-width: 0;
        position: static;
    }

    /* Submenu visí absolutně na #navigation; v užším sloupci by vyjelo mimo,
       proto je vztažným bodem celá hlavička. Vyšší z-index proto, že jinak
       výsledky našeptávače zalezou pod carousel na úvodní stránce. */
    .pytlik-header-inline .header-top {
        position: relative;
        z-index: 1002;
    }

    .pytlik-header-inline #navigation .menu-level-2 {
        left: 0;
        right: 0;
        width: auto;
        /* Panel je bílý na bílém pozadí stránky — zelený obrys ukáže, kde
           rozbalené podmenu končí. Nahoře nic: tam navazuje na hlavičku.
           !important — spodní hranu si šablona nuluje vlastním pravidlem. */
        border: 2px solid #89bf81;
        border-top: 0;
        border-bottom: 2px solid #89bf81 !important;
    }

    .pytlik-header-inline #navigation .menu-level-1 {
        justify-content: center;
    }

    .pytlik-header-inline #navigation .menu-level-1 > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }

    .pytlik-header-inline .header-top-wrapper .menu-helper {
        flex: 0 0 auto;
        position: static;
        margin: 0;
    }

    .pytlik-header-inline .header-bottom {
        display: none;
    }
}

/* Užší okna: cena u košíku a část loga ustoupí, ať se odkazy vejdou celé. */
@media (min-width: 992px) and (max-width: 1350px) {
    .pytlik-header-inline .header-top-wrapper .navigation-buttons .cart-price {
        display: none !important;
    }

    .pytlik-header-inline .header-top-wrapper .site-name {
        max-width: 150px;
    }
}

@media (min-width: 992px) and (max-width: 1150px) {
    .pytlik-header-inline #navigation .menu-level-1 > li > a {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 15px;
    }
}

/* Lišta nad hlavičkou pryč. Její odkazy (O nás, Kontakt, Obchodní podmínky,
   GDPR) vedou do hlavního menu i do patičky, takže jen ubírala výšku. Přihlášení
   a registraci z ní přesouvá doplnky.js mezi lupu a košík jako ikonku
   uživatele — proto se skrývá jen samotná lišta, ne blok s tlačítky. */
.top-navigation-bar {
    display: none;
}

/* Ikonka uživatele: stejný rozměr i ikonový font jako lupa a košík vedle. */
.navigation-buttons .pytlik-ucet {
    display: flex;
    align-items: center;
}

.navigation-buttons .pytlik-ucet .top-nav-button-login {
    position: relative;
    display: block;
    width: 20px;
    height: 50px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.navigation-buttons .pytlik-ucet .top-nav-button-login::before {
    content: "\e922";
    display: block;
    font-family: shoptet;
    font-size: 20px;
    line-height: 50px;
}

/* Popisek nese ikonka; text by vedle lupy a košíku rozbil řádek. */
.navigation-buttons .pytlik-ucet .top-nav-button-login span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Registrace má své místo v přihlašovacím okně, v hlavičce by byla navíc. */
.navigation-buttons .pytlik-ucet .top-nav-button-register {
    display: none;
}

/* Přihlášený zákazník: „Můj účet" je stejná ikonka jako přihlášení, jinak by
   dva textové odkazy rozhodily řádek a lezly přes menu. Odhlášení v hlavičce
   není — patří do zákaznického centra, kam ikonka vede. */
.navigation-buttons .pytlik-ucet .top-nav-button-logout {
    display: none;
}

.navigation-buttons .pytlik-ucet .top-nav-button-account {
    position: relative;
    display: block;
    width: 20px;
    height: 50px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
}

.navigation-buttons .pytlik-ucet .top-nav-button-account::before {
    content: "\e922";
    display: block;
    font-family: shoptet;
    font-size: 20px;
    line-height: 50px;
}

.navigation-buttons .pytlik-ucet .top-nav-button-account span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* V zákaznickém centru je odhlášení posledním odkazem v seznamu, ne tlačítkem
   vraženým mezi první dvě položky. Šablona mu bere odrážku a dává odsazení,
   protože počítá s tlačítkem — vrací se do řady k ostatním odkazům. */
.client-center-box li.logout {
    margin-top: 0;
    list-style: disc;
}

.client-center-box li.logout a.pytlik-logout {
    display: inline;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #89bf81;
    background: none;
    border: 0;
    border-radius: 0;
    text-transform: none;
}

.client-center-box li.logout a.pytlik-logout:hover {
    color: #4a6b45;
}

/* Na mobilu je přihlášení položkou rozbaleného menu, ikonka by ho zdvojila. */
@media (max-width: 991px) {
    .navigation-buttons .pytlik-ucet {
        display: none;
    }
}

/* Přihlašovací okno: zapomenuté heslo pod polem s heslem, registrace jako
   tlačítko pod přihlášením (přeskládává doplnky.js). */
.pytlik-login__forgotten {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
}

.pytlik-login .pytlik-login__alt {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid #eee;
    font-size: 14px;
    color: #666;
    text-align: center;
}

.pytlik-login .pytlik-login__register {
    display: block;
    margin-top: 10px;
}

/* Rámeček fokusu (vyhledávání, formuláře) v zelené e-shopu místo tmavě modré
   ze šablony. Měníme jen barvu — obrys zůstává, aby bylo při ovládání klávesnicí
   vidět, kde uživatel je. */
:focus,
:focus-visible {
    /* !important — šablona si barvu obrysu drží vlastním pravidlem s vyšší vahou. */
    outline-color: #89bf81 !important;
}

/* Drobečková navigace se nikde nezobrazuje. Skrývá se CSS, ne odstraněním z HTML,
   takže strukturovaná data (BreadcrumbList) zůstávají vyhledávačům k dispozici. */
.breadcrumbs {
    display: none;
}

/* Úvod: text vlevo, fotka vpravo, bez prázdné plochy pod ní. */
.pytlik-intro {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
}

.pytlik-intro__text {
    flex: 1 1 320px;
}

.pytlik-intro__text p:last-child {
    margin-bottom: 0;
}

.pytlik-intro__image {
    flex: 1 1 320px;
}

.pytlik-intro__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Pobočky jako karty — otevírací doba patří ke své prodejně, ne na druhou stranu stránky. */
.pytlik-pobocky {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.pytlik-pobocka {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    padding: 24px;
    background: #fff;
    border: 1px solid #e2ece0;
    border-radius: 8px;
}

/* Fotka provozovny sedí na horní hraně karty — proto záporné odsazení o padding.
   !important — odsazení odstavců si šablona drží pravidlem s vyšší vahou. */
.pytlik-pobocka p.pytlik-pobocka__foto {
    margin: -24px -24px 18px !important;
}

.pytlik-pobocka__foto img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.pytlik-pobocka h2 {
    margin: 0 0 14px;
    font-size: 24px;
}

.pytlik-pobocka p {
    margin: 0 0 8px;
}

.pytlik-pobocka__adresa {
    color: #555;
}

.pytlik-pobocka__mapa {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 14px;
}

.pytlik-pobocka__note {
    margin-bottom: 18px;
    font-size: 14px;
    color: #666;
}

/* Otevírací doba dole, ať karty končí zarovnaně i při různě dlouhých adresách. */
.pytlik-hodiny {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.pytlik-hodiny__title {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.pytlik-hodiny table {
    width: 100%;
    margin: 0;
}

.pytlik-hodiny td {
    padding: 2px 0;
    border: 0;
}

.pytlik-hodiny td + td {
    text-align: right;
    white-space: nowrap;
}

/* Rozvoz nejde podle otevírací doby — v sobotu se na prodejně jen vydává,
   proto to patří přímo pod hodiny, ne do obecného textu nahoře. */
.pytlik-hodiny__note {
    margin: 10px 0 0 !important;
    font-size: 13px;
    line-height: 1.45;
    color: #666;
}

@media (max-width: 767px) {
    .pytlik-intro {
        gap: 20px;
        margin-bottom: 30px;
    }

    .pytlik-pobocka {
        flex: 1 1 100%;
        padding: 18px;
    }

    .pytlik-pobocka p.pytlik-pobocka__foto {
        margin: -18px -18px 14px !important;
    }

    .pytlik-pobocka__foto img {
        height: 170px;
    }
}

/* Otevřené hledání zabere místo menu — jinak se pole vtěsná mezi logo a odkazy
   a rozhodí celý řádek hlavičky. */
@media (min-width: 992px) {
    body.pytlik-header-inline.search-window-visible #navigation,
    body.pytlik-header-inline.search-window-visible .menu-helper {
        display: none !important;
    }

    /* Pole se vykreslí doprostřed hlavičky, ne hned za logem. Absolutní pozice
       proto, že logo a ikony nemají stejnou šířku a flexem by zůstalo mimo osu. */
    body.pytlik-header-inline.search-window-visible .header-top .search {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        /* Transform dělá z pole vlastní vrstvu, takže z-index našeptávače uvnitř
           už proti ztmavení pod hlavičkou neplatí — musí být nad ním celé pole. */
        z-index: 1004;
        /* 480 px je šířka, při které si našeptávač pod polem drží tři sloupce
           produktů; v širším panelu Shoptet přepne na dva sloupce vedle kategorií. */
        width: min(480px, calc(100% - 440px));
        /* Boční odsazení šablony se různí podle šířky okna a našeptávač pod polem
           by pak seděl jinam než pole samo. */
        /* !important — šablona si odsazení drží pravidlem s vyšší vahou. */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0;
        flex: 0 0 auto;
    }

    /* Našeptávač si šířku i odsazení počítá pro pole u kraje hlavičky. Pod
       vycentrovaným polem musí sedět přesně na něm a nesmí přerůst obrazovku. */
    body.pytlik-header-inline.search-window-visible .searchWhisperer {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        max-height: calc(100vh - 170px);
        overflow-y: auto;
        padding: 20px 24px 10px;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    }

    /* Vedle nalezených kategorií zůstává prázdný sloupec, čára k němu jen poutá pozornost. */
    body.pytlik-header-inline.search-window-visible .searchWhisperer__additionalResults {
        border-right: 0;
    }

    /* Rozbalené podmenu ztmaví stránku pod hlavičkou; odkazy v hlavičce musí
       zůstat čitelné, proto ztmavení začíná až pod ní. Rozbalená položka menu
       nese třídu `exp`, submenu má z-index 1001. */
    .header-top:has(#navigation .menu-level-1 > li.exp)::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 100vh;
        background: rgba(0, 0, 0, .45);
        z-index: 1000;
    }

    /* Otevřené hledání naopak ztmaví celou stránku i s logem a košíkem — hned
       po kliknutí na lupu, ne až s prvními výsledky. Ikony vpravo jsou položky
       flexu se z-indexem 1001, takže ztmavení musí být výš než ony a zároveň
       níž než vyhledávací pole (1004). Klik jím propouštíme na Shoptetí vrstvu
       pod ním, která hledání zavírá. */
    body.pytlik-header-inline.search-window-visible .header-top::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        pointer-events: none;
        z-index: 1003;
    }

    /* Shoptet si ztmavuje sám (body::before), jenže ta vrstva leží pod hlavičkou
       a logo míjí — pak svítí světlejší než okolí. Necháváme ji jen jako plochu
       pro zavření kliknutím, kreslí naše vrstva výše. */
    body.pytlik-header-inline.search-window-visible::before {
        background: transparent !important;
    }

    /* Kategorie nemají vlastní obrázky, tak za ně Shoptet dává prázdný rámeček
       s ikonou složky — ten pryč a položky srovnat do jednoho řádku. */
    #navigation .menu-level-2 .menu-image:has(img[src*="folder.svg"]),
    #navigation .menu-level-2 .menu-image:has(img[data-src*="folder.svg"]) {
        display: none;
    }

    #navigation .menu-level-2 {
        justify-content: center;
        gap: 4px 32px;
        padding: 14px 20px 20px;
    }

    #navigation .menu-level-2 > li {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none;
        align-items: center;
        white-space: nowrap;
    }

    #navigation .menu-level-2 > li > div {
        width: auto;
    }

    #navigation .menu-level-2 > li > div > a {
        padding: 6px 0;
        white-space: nowrap;
    }
}

/* Vyhledávání na mobilu. Otevřené pole byl jen šedý popisek vedle křížku —
   nevypadalo jako pole, do kterého se dá psát, a odeslat šlo pouze klávesou,
   protože tlačítko „Hledat" šablona pod 992 px schovává. */
@media (max-width: 991px) {
    body.search-window-visible .header-top .search {
        padding: 8px 12px 10px !important;
    }

    /* Vztažný bod pro tlačítko. Fieldset uvnitř formuláře má display: contents,
       takže se pozicovat nedá — nese rozvržení až samotný formulář. */
    body.search-window-visible .header-top .search .search-form {
        position: relative;
    }

    /* Rámeček a světlá výplň dělají z popisku pole. Levé odsazení drží místo
       ikoně, kterou si tam kreslí šablona, pravé tlačítku „Hledat".
       16 px je nejmenší velikost, při které iOS stránku po ťuknutí do pole
       nepřiblíží. */
    body.search-window-visible .header-top .search .search-input {
        height: 44px !important;
        border: 1px solid #cfdccb !important;
        border-radius: 22px !important;
        background: #f6f8f5 !important;
        padding: 10px 104px 10px 44px !important;
        font-size: 16px !important;
    }

    body.search-window-visible .header-top .search .search-input-icon {
        left: 10px !important;
        width: 32px !important;
        height: 44px !important;
    }

    body.search-window-visible .header-top .search .search-button {
        display: block !important;
        position: absolute !important;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        height: 34px;
        line-height: 32px;
        padding: 0 18px !important;
        border-radius: 17px !important;
        font-size: 13px !important;
    }

    /* Našeptávač skládá šablona do řádku a kategorie mu vyjdou až pod devíti
       kartami produktů — na mobilu se k nim člověk doroluje jako k poslednímu,
       přitom je to nejrychlejší cesta k celé kategorii. Na desktopu je má
       nahoře, tady se to srovná do jednoho sloupce ve stejném pořadí.
       Bez nowrap by sloupec při přetečení výšky zalomil další sloupec vedle
       sebe a tlačítko „Zobrazit všechny výsledky" by odjelo mimo obrazovku. */
    .searchWhisperer {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .searchWhisperer__additionalResults {
        order: 1 !important;
    }

    .searchWhisperer__products {
        order: 2 !important;
    }

    .searchWhisperer__buttonWrapper {
        order: 3 !important;
        width: 100% !important;
        justify-content: center;
    }

    .searchWhisperer__products,
    .searchWhisperer__additionalResults {
        width: 100% !important;
    }
}

/* Banner na titulní straně přes celou šířku — rozložení podle almastflowers.cz,
   které si klientka vybrala. Šablona dělí pruh na carousel (2/3) a dva boční
   bannery (1/3); ty jsou vypnuté v administraci (Doplňkové bannery → Top 1, 2)
   a carousel si bere celou šířku.

   Grafika od klientky jsou plakáty na výšku 2:3. V širokém pruhu 1920×700 vyjde
   plakát na 467 px, takže čtyři vedle sebe vyplní šířku skoro přesně a nic se
   nemusí ořezávat — což by u těchhle návrhů vždycky uřízlo buď nadpis, nebo
   patičku s logem a pobočkami. */
.banners-row .next-to-carousel-banners {
    display: none;
}

.banners-row > .col-sm-4 {
    display: none;
}

.banners-row > .col-sm-8 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* Šablona má na obrázku pevné rozměry z nahraného souboru; ať se přizpůsobí
   šířce sloupce a nepřetéká na užších oknech. */
.banners-row #carousel .item img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- ikony výhod na titulce -------------------------------------------- */

/* Šablona bere rozměr obrázku z nahraného SVG, takže tři ikony ze SVG Repa
   (30 px) stály vedle listu (102 px, kresba v něm zabírá jen 60 % plochy)
   a vypadaly jako drobečky. Nové ikony jsou kreslené podle listu — stejná
   zelená, stejně silný tah — a 44 px jim dá opticky tutéž velikost.
   List zůstává, jak je; on je předloha.

   Selektory sedí na původních souborech bannerů, takže jakmile se ikona
   vymění v administraci (Vzhled a obsah → Výhody), pravidlo samo přestane
   platit a projeví se nahraný obrázek. `data-src` proto, že skutečná adresa
   visí do načtení tam — v `src` je zatím prázdný placeholder. */
.benefitBanner__img[data-src*="truck-speed-svgrepo"],
.benefitBanner__img[data-src*="flower-line-2-svgrepo"],
.benefitBanner__img[data-src*="gift-svgrepo"] {
    width: 44px;
    height: 44px;
}

.benefitBanner__img[data-src*="truck-speed-svgrepo"] {
    content: url("/user/documents/upload/images/ikony/rozvoz.svg");
}

.benefitBanner__img[data-src*="flower-line-2-svgrepo"] {
    content: url("/user/documents/upload/images/ikony/kytice.svg");
}

.benefitBanner__img[data-src*="gift-svgrepo"] {
    content: url("/user/documents/upload/images/ikony/darek.svg");
}

/* --- výpis podkategorií ------------------------------------------------ */

/* Žádná podkategorie nemá vlastní obrázek, tak za ni Shoptet dává prázdný
   rámeček s ikonou fotoaparátu (`folder.svg`) — v seznamu nad zbožím zbyla jen
   šedá skvrna před názvem. Skutečná adresa obrázku visí do načtení v `data-src`
   (šablona je dolaďuje až na řadu), takže selektor musí sedět na obojím —
   jinak by se rámeček ukázal aspoň do chvíle, než se obrázek stáhne. */
.subcategories .image:has(img[src*="folder.svg"]),
.subcategories .image:has(img[data-src*="folder.svg"]) {
    display: none;
}

/* Bez obrázků zbyly holé názvy roztažené po čtvrtinách řádku — vypadalo to jako
   nedodělek. Jsou z nich dlaždice v zeleni e-shopu, sražené k sobě a zalomené
   podle počtu.

   Podmínka `:not(:has(…))` drží pravidla jen pro výpis, kde žádná podkategorie
   nemá vlastní obrázek. Jakmile klient nějaký nahraje, dlaždice se samy vypnou
   a vrátí se původní karty s obrázky — do těch by se název v pilulce nevešel. */
.subcategories.with-image:not(:has(.image img:not([data-src*="folder.svg"]))) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.subcategories.with-image:not(:has(.image img:not([data-src*="folder.svg"]))) > li {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
    list-style: none;
}

.subcategories.with-image:not(:has(.image img:not([data-src*="folder.svg"]))) > li > a {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 0;
    padding: 9px 18px;
    border-radius: 999px;
    background: #f2f8f1;
    color: #4a6b45;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.subcategories.with-image:not(:has(.image img:not([data-src*="folder.svg"]))) > li > a:hover,
.subcategories.with-image:not(:has(.image img:not([data-src*="folder.svg"]))) > li > a:focus {
    background: #89bf81;
    color: #fff;
    text-decoration: none;
}

/* Podtržení si po najetí kreslí vnitřní span, ne odkaz — v pilulce působilo
   jako přeškrtnutý text. */
.subcategories.with-image:not(:has(.image img:not([data-src*="folder.svg"]))) > li > a:hover .text,
.subcategories.with-image:not(:has(.image img:not([data-src*="folder.svg"]))) > li > a:focus .text {
    text-decoration: none;
}

/* Název se ořezával na dva řádky ve dvou třetinách šířky odkazu — počítáno pro
   kartu s obrázkem vedle. V pilulce z „Do 500 Kč" zbylo „Do 500…". */
.subcategories.with-image:not(:has(.image img:not([data-src*="folder.svg"]))) .text {
    max-width: none;
    overflow: visible;
    white-space: nowrap;
}

/* Nadpis „Informace pro vás" dělá šablona jako pageElement — nadpis obalí
   spanem, který si nese Work Sans a menší velikost. Vedle sousedních sloupců
   (prostá h4 v Libre Baskerville) tak vypadal jako z jiné stránky. */
#footer .custom-footer__articles .pageElement__heading,
#footer .custom-footer__articles .pageElement__heading span {
    font-family: "Libre Baskerville", serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
}

/* Stejné odsazení jako u sousedů, ať nadpisy sedí na jedné lince. */
#footer .custom-footer__articles .pageElement__heading {
    margin: 11px 0 26px;
}

/* --- patička ---------------------------------------------------------- */

/* Odkazy ve sloupci „Informace pro vás" vypadaly jako obyčejný černý text.
   Sjednoceny s odkazem „Kontakty a otevírací doba" ve vedlejším sloupci.
   !important — barvu i podtržení si šablona drží vlastním pravidlem, velikost
   písma navíc sedí na položce seznamu, ne na odkazu. */
.custom-footer__articles ul li {
    font-size: 16px !important;
}

.custom-footer__articles ul a {
    color: #89bf81 !important;
    text-decoration: underline !important;
}

.custom-footer__articles ul a:hover,
.custom-footer__articles ul a:focus {
    color: #4a6b45 !important;
}

/* Spodní lišta: copyright vlevo, podpis dodavatele vpravo. Podpis Shoptetu
   zůstává v HTML kvůli šabloně, jen je skrytý (viz doplnky.js). */
.footer-bottom .container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
}

.footer-bottom .copyright {
    text-align: left;
}

.footer-bottom .container #signature {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.pytlik-autor {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: #6b7a69;
    font-size: 14px;
    text-decoration: none;
}

.pytlik-autor:hover .pytlik-autor__text {
    text-decoration: underline;
}

/* Značka nese nápis KREKRRR, v malém by byla nečitelná. */
.pytlik-autor__logo {
    display: block;
    width: auto;
    height: 32px;
}