/* =========================================================
   HEADER PHASE 2 ENHANCED v1 — Loja da Barba
   Shrink on scroll, logo nativo, microanimações.
   Para reverter: remova as linhas deste arquivo e header-phase2-enhanced.js no header.twig
   ========================================================= */

/* ── Logo nativo (sem filtro CSS) vs fallback filtrado ── */
header#site-header #logo img.site-logo--native {
    filter: none !important;
}

header#site-header #logo img.site-logo--filtered {
    filter: brightness(0) invert(1) !important;
}

header#site-header #logo img.site-logo {
    transition: transform 0.3s ease, max-height 0.3s ease, opacity 0.3s ease;
}

#custom-mobile-drawer .drawer-logo.drawer-logo--native {
    filter: none;
}

#custom-mobile-drawer .drawer-logo.drawer-logo--filtered {
    filter: brightness(0) invert(1);
}

/* ── Barra promocional: colapsa ao rolar ── */
.top-advantage-bar {
    transition: max-height 0.32s cubic-bezier(0.25, 1, 0.5, 1),
                height 0.32s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.28s ease,
                padding 0.32s ease,
                border-color 0.28s ease;
}

body.ldb-header-scrolled .top-advantage-bar {
    max-height: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom-color: transparent !important;
    overflow: hidden !important;
    pointer-events: none;
}

/* ── Header encolhe ao rolar ── */
header#site-header {
    transition: padding 0.32s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.32s ease !important;
}

body.ldb-header-scrolled header#site-header {
    padding: 8px 0 !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14) !important;
}

/* ── Desktop: logo vertical maior + header refinado ── */
@media (min-width: 992px) {
    header#site-header .header-logo-col {
        flex: 0 0 auto;
        width: auto;
        max-width: 200px;
        min-width: 140px;
    }

    header#site-header #logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 64px;
    }

    header#site-header #logo img.site-logo {
        max-height: 64px;
        width: auto;
        max-width: 180px;
        object-fit: contain;
    }

    body.ldb-header-scrolled header#site-header #logo img.site-logo {
        max-height: 48px;
        max-width: 150px;
    }

    header#site-header .header-search-col {
        flex: 1 1 auto;
    }

    header#site-header .header-icons-col {
        flex: 0 0 auto;
    }

    header#site-header .header-icons-col .d-flex {
        gap: 2px;
    }

    header#site-header #search .input-lg {
        height: 44px !important;
        font-size: 14px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) inset;
    }

    header#site-header #search .btn-lg {
        height: 44px !important;
    }

    header#site-header .circleBtn i.fa {
        font-size: 22px !important;
    }

    header#site-header .header-contact-btn {
        font-size: 12.5px !important;
        padding: 7px 12px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    header#site-header #logo img.site-logo {
        max-height: 56px;
        max-width: 160px;
    }
}

@media (max-width: 767px) {
    body.ldb-header-scrolled header#site-header {
        height: 60px !important;
    }

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

/* ── Ícones do header: transições refinadas ── */
header#site-header .circleBtn i.fa {
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
                color 0.25s ease !important;
}

header#site-header .circleBtn:hover i.fa,
header#site-header .circleBtn:focus-visible i.fa {
    transform: scale(1.12) translateY(-1px);
}

header#site-header .header-contact-btn {
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease !important;
}

header#site-header .header-contact-btn:hover {
    transform: translateY(-1px);
}

/* ── Microanimação nos badges (carrinho / favoritos) ── */
@keyframes ldbBadgePop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.4); }
    65%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

header#site-header .qval,
.mobile-bottom-bar .m-cart-badge,
.mobile-bottom-bar .m-wishlist-badge {
    transition: transform 0.2s ease;
}

header#site-header .qval.ldb-badge-bump,
.mobile-bottom-bar .m-cart-badge.ldb-badge-bump,
.mobile-bottom-bar .m-wishlist-badge.ldb-badge-bump {
    animation: ldbBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Menu desktop: transição suave ao encolher header ── */
@media (min-width: 992px) {
    .cimenu {
        transition: margin-top 0.32s cubic-bezier(0.25, 1, 0.5, 1);
    }

    body.ldb-header-scrolled .cimenu {
        margin-top: 16px !important;
    }
}

/* Respeita preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .top-advantage-bar,
    header#site-header,
    header#site-header #logo img.site-logo,
    header#site-header .circleBtn i.fa,
    .cimenu {
        transition: none !important;
    }

    header#site-header .qval.ldb-badge-bump,
    .mobile-bottom-bar .m-cart-badge.ldb-badge-bump {
        animation: none;
    }
}