/* =========================================================
   HEADER MOBILE PHASE 1 — Loja da Barba
   Logo compacto à esquerda + busca inline no header (≤767px).
   Para reverter: remova a linha deste arquivo no header.twig
   ========================================================= */

:root {
    --ldb-mobile-header-height: 56px;
    --ldb-mobile-header-cep-row: 22px;
    --ldb-mobile-sticky-top: calc(var(--ldb-top-advantage-height, 34px) + var(--ldb-mobile-header-height) + var(--ldb-mobile-header-cep-row));
}

@media (max-width: 767px) {
    header#site-header {
        height: auto !important;
        min-height: calc(var(--ldb-mobile-header-height) + var(--ldb-mobile-header-cep-row)) !important;
        padding: 0 0 2px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
    }

    header#site-header > .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 8px 0 4px !important;
        height: auto !important;
    }

    header#site-header .row.flexwrap991 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px 8px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    header#site-header .header-logo-col {
        position: static !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        order: 1 !important;
        padding: 0 !important;
    }

    header#site-header #logo {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    header#site-header #logo img.site-logo {
        max-height: 32px !important;
        max-width: 76px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    header#site-header .header-search-col {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        order: 2 !important;
        padding: 0 !important;
    }

    header#site-header .header-icons-col {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    header#site-header #wishlist-total {
        display: none !important;
    }

    header#site-header #search {
        width: 100% !important;
        margin: 0 !important;
    }

    header#site-header #search.ldb-search-wrap {
        position: relative;
        z-index: 2;
    }

    header#site-header #search .input-lg {
        height: 38px !important;
        font-size: 13px !important;
        padding-left: 14px !important;
        border-radius: 20px 0 0 20px !important;
    }

    header#site-header #logo a {
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    header#site-header #search .btn-lg {
        height: 38px !important;
        padding: 0 14px !important;
        border-radius: 0 20px 20px 0 !important;
        color: var(--ldb-gold) !important;
    }

    header#site-header #search .btn-lg .fa,
    header#site-header #search .btn-lg i.fa {
        color: var(--ldb-gold) !important;
    }

    header#site-header #search .btn-lg:hover,
    header#site-header #search .btn-lg:focus-visible {
        color: var(--ldb-gold-hover) !important;
        background-color: #f8f9fa !important;
    }

    header#site-header #search .btn-lg:hover .fa,
    header#site-header #search .btn-lg:focus-visible .fa {
        color: var(--ldb-gold-hover) !important;
    }

    header#site-header #search .ldb-autocomplete-panel {
        top: calc(100% + 4px);
        max-height: min(360px, calc(100dvh - var(--ldb-mobile-sticky-top) - 20px));
        border-radius: 14px;
    }

    header#site-header .cimenu {
        display: none !important;
    }

    body.ldb-header-scrolled header#site-header {
        min-height: calc(52px + var(--ldb-mobile-header-cep-row)) !important;
        height: auto !important;
        padding: 0 0 2px !important;
    }

    body.ldb-header-scrolled {
        --ldb-mobile-header-height: 52px;
    }

    body.ldb-header-scrolled header#site-header #logo img.site-logo {
        max-height: 28px !important;
        max-width: 68px !important;
    }

    body.ldb-header-scrolled header#site-header #search .input-lg,
    body.ldb-header-scrolled header#site-header #search .btn-lg {
        height: 36px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    header#site-header #logo img.site-logo {
        transition: none !important;
    }
}