#header-top-bar {
    position: relative !important;
    z-index: 1047 !important;
}

#account #login_form {
    position: relative;
    z-index: 1100;
}

#account #login_form .login-form-submit,
#account #login_form .btn[type="submit"] {
    position: relative;
    z-index: 2;
}

.account-icon-dropdown .dropdown-menu,
body > .bbf-account-panel {
    box-sizing: border-box;
}

.account-icon-dropdown .dropdown-body,
body > .bbf-account-panel .dropdown-body {
    box-sizing: border-box;
}

body.bbf-panel-open bbf-concierge-widget {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

#jtl-nav-wrapper,
header.fixed-navbar {
    position: absolute !important;
    z-index: 1047 !important;
}

.side-sticky {
    position: absolute !important;
    z-index: 1046 !important;
}

bbf-concierge-widget {
    z-index: 1044 !important;
}

.bbf-search,
#bbf-search-root {
    z-index: 1000 !important;
}

#bbf-search-panel,
.bbf-search-panel {
    z-index: 999999;
}

.account-icon-dropdown .dropdown-menu :focus-visible,
body > .bbf-account-panel :focus-visible {
    outline: 3px solid #fff200 !important;
    outline-offset: 3px !important;
}

@media (max-width: 1199.98px) {
    #account #login_form {
        max-width: 100%;
    }

    #account #login_form .login-form-submit {
        margin-bottom: 32px;
    }

    body.bbf-customercenter-login-page bbf-concierge-widget,
    body:has(#account #login_form) bbf-concierge-widget {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    .account-icon-dropdown.show .dropdown-menu,
    .account-icon-dropdown.open .dropdown-menu,
    .account-icon-dropdown.hover .dropdown-menu,
    .account-icon-dropdown .dropdown-menu.show,
    .account-icon-dropdown .dropdown-menu[style*="display: block"],
    .account-icon-dropdown .bbf-account-panel,
    .account-icon-dropdown .bbf-sidebasket-container,
    body > .bbf-account-panel.show {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 24px 18px 96px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transform: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(247, 248, 251, 0.98) !important;
        box-shadow: none !important;
        z-index: 2050 !important;
    }

    body > .bbf-account-panel.show {
        inset: 0 0 0 auto !important;
        width: min(420px, calc(100vw - 42px)) !important;
        max-width: calc(100vw - 42px) !important;
        box-shadow: -24px 0 80px rgba(15, 23, 42, 0.24) !important;
    }

    .account-icon-dropdown.show .dropdown-menu,
    .account-icon-dropdown.open .dropdown-menu,
    .account-icon-dropdown.hover .dropdown-menu,
    .account-icon-dropdown .dropdown-menu.show,
    .account-icon-dropdown .dropdown-menu[style*="display: block"],
    .account-icon-dropdown .bbf-account-panel.show,
    body > .bbf-account-panel.show {
        display: flex !important;
    }

    .account-icon-dropdown.show .dropdown-body,
    .account-icon-dropdown.open .dropdown-body,
    .account-icon-dropdown.hover .dropdown-body,
    .account-icon-dropdown .dropdown-menu[style*="display: block"] .dropdown-body,
    .account-icon-dropdown .dropdown-menu.show .dropdown-body,
    .account-icon-dropdown .bbf-account-panel .dropdown-body,
    body > .bbf-account-panel .dropdown-body {
        width: min(100%, 520px) !important;
        min-width: 0 !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .account-icon-dropdown.show form,
    .account-icon-dropdown.open form,
    .account-icon-dropdown.hover form,
    .account-icon-dropdown .dropdown-menu[style*="display: block"] form,
    .account-icon-dropdown .dropdown-menu.show form,
    body > .bbf-account-panel form {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .account-icon-dropdown.show .yl-bg-sl,
    .account-icon-dropdown.open .yl-bg-sl,
    .account-icon-dropdown.hover .yl-bg-sl,
    .account-icon-dropdown .dropdown-menu[style*="display: block"] .yl-bg-sl,
    .account-icon-dropdown .dropdown-menu.show .yl-bg-sl,
    body > .bbf-account-panel .yl-bg-sl {
        display: inline-block;
        margin: 4px 0 18px;
        padding: 0 8px;
        background: #fff200;
        color: #0f172a;
        font-size: clamp(2rem, 12vw, 3.2rem);
        line-height: 0.92;
        letter-spacing: 0;
    }

    .account-icon-dropdown.show legend,
    .account-icon-dropdown.open legend,
    .account-icon-dropdown.hover legend,
    .account-icon-dropdown .dropdown-menu[style*="display: block"] legend,
    .account-icon-dropdown .dropdown-menu.show legend,
    body > .bbf-account-panel legend {
        margin-bottom: 18px;
        color: #111827;
        font-size: 0.95rem;
        font-weight: 700;
    }

    .account-icon-dropdown.show .form-group,
    .account-icon-dropdown.open .form-group,
    .account-icon-dropdown.hover .form-group,
    .account-icon-dropdown .dropdown-menu[style*="display: block"] .form-group,
    .account-icon-dropdown .dropdown-menu.show .form-group,
    body > .bbf-account-panel .form-group {
        margin-bottom: 14px;
    }

    .account-icon-dropdown.show .form-control,
    .account-icon-dropdown.open .form-control,
    .account-icon-dropdown.hover .form-control,
    .account-icon-dropdown .dropdown-menu[style*="display: block"] .form-control,
    .account-icon-dropdown .dropdown-menu.show .form-control,
    body > .bbf-account-panel .form-control {
        width: 100%;
        height: 52px;
        border: 1px solid rgba(15, 23, 42, 0.18);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        color: #0f172a;
        font-size: 16px;
    }

    .account-icon-dropdown.show .btn,
    .account-icon-dropdown.open .btn,
    .account-icon-dropdown.hover .btn,
    .account-icon-dropdown .dropdown-menu[style*="display: block"] .btn,
    .account-icon-dropdown .dropdown-menu.show .btn,
    body > .bbf-account-panel .btn {
        width: 100%;
        min-height: 52px;
        border-radius: 8px;
        background: #0f172a;
        color: #ffffff;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
    }

    body:has(.account-icon-dropdown.show) bbf-concierge-widget,
    body:has(.account-icon-dropdown.open) bbf-concierge-widget,
    body:has(.account-icon-dropdown.hover) bbf-concierge-widget,
    body:has(.account-icon-dropdown .dropdown-menu.show) bbf-concierge-widget,
    body:has(.account-icon-dropdown .dropdown-menu[style*="display: block"]) bbf-concierge-widget,
    body:has(.account-icon-dropdown .bbf-account-panel.show) bbf-concierge-widget,
    body:has(> .bbf-account-panel.show) bbf-concierge-widget {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    #account #login_form {
        max-width: 560px;
    }

    body.bbf-customercenter-login-page bbf-concierge-widget {
        z-index: 900 !important;
    }

    .account-icon-dropdown.show .dropdown-menu,
    .account-icon-dropdown.open .dropdown-menu,
    .account-icon-dropdown.hover .dropdown-menu,
    .account-icon-dropdown .dropdown-menu.show,
    .account-icon-dropdown .dropdown-menu[style*="display: block"],
    body > .bbf-account-panel.show {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 28px clamp(24px, 7vw, 72px) 96px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transform: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(247, 248, 251, 0.985) !important;
        box-shadow: none !important;
        z-index: 2050 !important;
    }

    body > .bbf-account-panel.show {
        inset: 0 0 0 auto !important;
        width: min(520px, calc(100vw - 56px)) !important;
        max-width: calc(100vw - 56px) !important;
        box-shadow: -24px 0 80px rgba(15, 23, 42, 0.22) !important;
    }

    .account-icon-dropdown.show .dropdown-body,
    .account-icon-dropdown.open .dropdown-body,
    .account-icon-dropdown.hover .dropdown-body,
    .account-icon-dropdown .dropdown-menu[style*="display: block"] .dropdown-body,
    .account-icon-dropdown .dropdown-menu.show .dropdown-body,
    body > .bbf-account-panel .dropdown-body {
        width: min(100%, 520px) !important;
        min-width: 0 !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .account-icon-dropdown.show form,
    .account-icon-dropdown.open form,
    .account-icon-dropdown.hover form,
    .account-icon-dropdown .dropdown-menu[style*="display: block"] form,
    .account-icon-dropdown .dropdown-menu.show form,
    body > .bbf-account-panel form {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .account-icon-dropdown.show .form-control,
    .account-icon-dropdown.open .form-control,
    .account-icon-dropdown.hover .form-control,
    .account-icon-dropdown .dropdown-menu[style*="display: block"] .form-control,
    .account-icon-dropdown .dropdown-menu.show .form-control,
    body > .bbf-account-panel .form-control {
        width: 100%;
        height: 54px;
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
        color: #0f172a;
        font-size: 16px;
    }

    .account-icon-dropdown.show .btn,
    .account-icon-dropdown.open .btn,
    .account-icon-dropdown.hover .btn,
    .account-icon-dropdown .dropdown-menu[style*="display: block"] .btn,
    .account-icon-dropdown .dropdown-menu.show .btn,
    body > .bbf-account-panel .btn {
        width: 100%;
        min-height: 54px;
        border-radius: 8px;
    }

    body:has(.account-icon-dropdown.show) bbf-concierge-widget,
    body:has(.account-icon-dropdown.open) bbf-concierge-widget,
    body:has(.account-icon-dropdown.hover) bbf-concierge-widget,
    body:has(.account-icon-dropdown .dropdown-menu.show) bbf-concierge-widget,
    body:has(.account-icon-dropdown .dropdown-menu[style*="display: block"]) bbf-concierge-widget,
    body:has(> .bbf-account-panel.show) bbf-concierge-widget {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-icon-dropdown .dropdown-menu,
    .account-icon-dropdown .dropdown-menu *,
    body > .bbf-account-panel,
    body > .bbf-account-panel * {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}