/* ==========================================================================
   CAFÉ GAPE - MOBILNÍ STYLY (do 480 px)
   Vše je uvnitř @media (max-width: 480px), platí pouze na malých telefonech.
   DŮLEŽITÉ: načítej AŽ PO custom-styles.css (aby přebil desktop).
   ========================================================================== */

@media (max-width: 480px) {

    /* ------------------------------------------------------------------
       HOMEPAGE - texturované pozadí jen za horním bannerem (carousel + 3 bannery)
    ------------------------------------------------------------------ */
    .banners-row {
        background: url('https://786677.myshoptet.com/user/documents/upload/cafegape_bg-main.jpg') scroll center / cover no-repeat;
        padding: 1.5em 0;
    }

    .columns-mobile-2 .products-block>div {
        width: 100%;
    }

    .next-to-carousel-banners {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 10px;
    }

    /* ------------------------------------------------------------------
       HLAVIČKA - logo vlevo, ikony (účet + košík) vpravo, na jednom řádku.
       Vyhledávání na mobilu skryté. (ověřeno v prohlížeči na 390 px)
    ------------------------------------------------------------------ */

    /* Hlavička přiražená k vrchu. Šablona rezervuje 50px nahoře pro
       .top-navigation-bar (kterou jsme skryli), proto byla mezera. */
    #header {
        top: 0 !important;
    }

    /* Logo menší (desktop má max-height: 110px) */
    #header .site-name a img {
        max-height: 48px !important;
    }

    /* Logo vrátit do toku (šablona ho má position:absolute) */
    #header .site-name {
        position: static !important;
    }

    /* Horní řádek: logo vlevo, ikony vpravo, na jednom řádku */
    .header-top {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        row-gap: 0 !important;
    }

    .site-name-wrapper {
        order: 1;
        flex: 0 1 auto;
        margin: 0 !important;
    }

    /* ==== HAMBURGER MENU ============================
       Vytažení z .top-navigation-bar a úpravy chování.
       Zarovnání plynule do horní lišty vedle účtu a košíku.
    =================================================== */
    .top-navigation-bar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 0 !important;
        z-index: 80 !important; /* Sníženo z 10001: nyní by mělo menu panel přesunout ikonu do pozadí */
        background: transparent !important;
        border: none !important;
        pointer-events: none !important;
        /* nezamezuje klikání na logo dole */
    }

    .top-navigation-contacts,
    .top-navigation-menu,
    .responsive-tools a:not([data-target="navigation"]) {
        display: none !important;
    }

    .top-navigation-tools,
    .top-navigation-tools .responsive-tools {
        display: block !important;
    }

    /* Obal ikonky - nastavíme na fixní pozici vzhledem k oknu 
       Kopíruje zarovnání .header-top (.navigation-buttons) */
    .top-navigation-tools {
        position: absolute !important;
        top: 2px !important;
        /* Posunuto výše na úroveň ostatních ikon v hlavičce */
        right: 15px !important;
        pointer-events: auto !important;
    }

    /* Samotná ikona menu (čtvercový trigger button) bez pozadí */
    .responsive-tools a[data-target="navigation"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        line-height: normal !important;
        text-align: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: transparent !important;
    }

    /* Nahrazení vzhledu ikony pomocí čistého černého SVG hamburger menu */
    .responsive-tools a[data-target="navigation"]::before {
        content: '' !important;
        /* Musí být !important, aby to přebilo původní font-icon */
        display: block !important;
        width: 38px !important;
        /* Větší zóna pro ikonu */
        height: 38px !important;
        background-color: transparent !important;
        /* Důležité: zrušení případného šedého pozadí */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 32px 32px !important;
        /* Samotná kresba tři čar bude 32px */
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-family: inherit !important;
    }

    /* Skrytí hamburger ikony po kliknutí (když je menu otevřené) 
       Sichr přes více možných tříd (Shoptet na trigger dává .active, na body .navigation-window-visible apod) */
    .responsive-tools a[data-target="navigation"].active,
    .responsive-tools a[data-target="navigation"][aria-expanded="true"],
    body.navigation-window-visible .top-navigation-tools,
    body.window-open .top-navigation-tools,
    html.nav-mobile-open .top-navigation-tools {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* Vynulujeme případný text nebo vnitřní ikony (ve španu) */
    .responsive-tools a[data-target="navigation"] span,
    .responsive-tools a[data-target="navigation"]::after {
        display: none !important;
        content: '' !important;
    }

    /* Ikony účet + košík => posuneme je kousek doleva, aby bylo vpravo místo pro Hamburger */
    .navigation-buttons {
        order: 2;
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 18px;
        position: static !important;
        margin: 0 !important;
        padding-right: 48px !important;
        /* udělání místa pro absolutně pozicované hamburger menu */
    }

    /* Košík je v šabloně position:absolute s nějakými ustřelenými top/right souřadnicemi. 
       Musí mít relative pro odznáček, ale zároveň musíme vymazat jeho staré souřadnice, aby neuletěl */
    .navigation-buttons .cart-count {
        position: relative !important;
        top: 0 !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        margin: 0 !important;
    }

    .top-nav-button-login {
        padding: 0 !important;
        position: relative !important;
        top: 3px !important; /* Lehké posunutí ikony profilu dolů pro vizuální sloučení osy s košíkem */
    }

    /* Vyhledávání na mobilu skryté */
    .header-top .search {
        display: none !important;
    }

    /* Chování celé hlavičky při scrollu:
       - scrolled-down (scroll dolů) → celá bílá lišta #header i menu vyjedou nahoru
       - scrolled-up / vrch stránky → hlavička "přijede" zpět shora */
    #header,
    .top-navigation-bar {
        transition: transform 0.25s ease, opacity 0.25s ease !important;
    }

    html.scrolled-down #header {
        transform: translateY(-100%) !important;
        pointer-events: none;
    }

    /* .top-navigation-bar má height 0, proto posouváme v px, zhruba o výšku hlavičky (80px) */
    html.scrolled-down .top-navigation-bar {
        transform: translateY(-80px) !important;
        pointer-events: none;
    }

    /* Šedé pozadí pro hlavní obsah pouze na mobilech */
    .content-wrapper {
        background-color: #f7f7f7 !important;
    }

    /* Tlačítko/blok filtru na mobilu inline (ne na celou šířku) */
    .unveil-wrapper,
    .unveil-button[data-unveil="filters"] {
        display: inline-flex !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Karty produktů: Popisek nahoře, cena a tlačítko Detail vedle sebe na jednom řádku i na mobilu */
    .product [data-micro="offer"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .product .p-desc {
        width: 100% !important; /* Popisek na celý řádek nad nimi */
    }

    .product .prices {
        margin: 0 !important;
        margin-top: 15px !important; /* Odsazení od popisku nad cenou */
        flex: 1 1 auto !important; /* Cena zabere jen potřebné místo / roztáhne se */
        flex-basis: auto !important; /* Přepsání nativního 50% */
        display: flex !important;
        align-items: center !important;
    }

    .product .p-tools {
        margin-top: 15px !important; /* Odsazení od popisku pro tlačítko */
        padding-top: 0 !important; /* Zrušení 25px odsazení z desktopu */
        flex: 0 0 auto !important; /* Tlačítko zabere jen svou přirozenou šířku */
        flex-basis: auto !important; /* Přepsání nativního 50% */
        display: flex !important;
        align-items: center !important;
    }
}