@media (min-width: 1241px) {
    #top-bar > div[class] > .row {
        flex-wrap: nowrap !important;
    }
}

#top-bar .row > * {
    width: unset !important;
}

/* Bootstrap clearfix pseudo-elements can become flex items and break spacing. */
#top-bar .row.justify-content-between.align-items-center::before,
#top-bar .row.justify-content-between.align-items-center::after {
    content: none !important;
    display: none !important;
}

.mt-8 {
    margin-top: 5rem !important;
}

#top-bar.top_bar a {
    /*color: #fff !important;
    font-size: 15px !important;*/
}

/*top bar css start*/
#top-bar.top_bar {
    padding: 10px !important;
    border-bottom: 1px solid #f2f2f2 !important;
    background: linear-gradient(3deg, rgba(255,255,255,1) 0%, rgb(251 251 251) 0%, rgb(255 255 255) 100%) !important;
    background: #0e5981 !important;
}

#top-bar .top-nav_cll, #top-bar .top-nav_mail {
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: #FFF !important;
}
/*#top-bar.top_bar .top-links .top-links-item>a {
	padding: unset;
}*/
#top-bar .top-links-item.bp .select2-selection.select2-selection--single {
    align-content: center !important;
}
.list-view .product-slide-entry .point-of-action .quantity-box {
    margin-top: 6px;
}
@media (min-width: 1014px) {
    #top-bar .header-misc {
        margin-left: 10px !important;
    }
}
    body.style-21.b2c-layout #header_u1 #top-bar .header-misc {
        margin-left: 10px !important;
    }

    body.style-21.b2c-layout #top-bar .header-misc #top-search .input-group.search-field input,
    body.style-21.b2c-layout #top-bar .header-misc #top-search .input-group.search-field #sticky-keyword-search-button {
        min-height: 42px !important;
    }

        body.style-21.b2c-layout #top-bar .header-misc #top-search .input-group.search-field #sticky-keyword-search-button .icon-search {
            color: #000 !important;
            font-size: 16px !important;
        }

    #top-bar .top-nav_mail {
        color: #089CE9 !important;
    }

    @media (min-width: 1400px) {
        #top-bar .top-nav_cll {
            display: block !important;
        }
    }

    @media (max-width: 1024px) {
        #top-bar > .container-fluid > .row {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 5px !important;
        }

        #top-bar .col-12.col-md-2 {
            display: flex !important;
            flex: 0 0 auto !important;
            width: auto !important;
            justify-content: flex-end !important;
            margin-left: auto !important;
            order: 1 !important;
        }

            #top-bar .col-12.col-md-2 ul {
                display: flex !important;
                width: auto !important;
                justify-content: flex-end !important;
                gap: 5px !important;
            }

        #top-bar .logo-toll-container {
            order: 0 !important;
            width: auto !important;
            justify-content: flex-start !important;
        }

        #top-bar #logo {
            order: 0 !important;
        }

        #top-bar .header-misc {
            order: 2 !important;
        }
    }

    @media (max-width: 767px) {
        /* Small viewports: logo left + links right on one row, search wraps below. */
        #top-bar > .container-fluid > .row {
            flex-wrap: wrap !important;
        }

        #top-bar .col-12.col-md-2 {
            order: 1 !important;
            flex: 0 0 auto !important;
            width: auto !important;
            margin-left: auto !important;
            justify-content: flex-end !important;
        }

            #top-bar .col-12.col-md-2 .top-links.link-sd-rgth {
                display: flex !important;
                width: auto !important;
                justify-content: flex-end !important;
                flex-wrap: nowrap !important;
                gap: 4px !important;
                align-items: center !important;
            }

                #top-bar .col-12.col-md-2 .top-links.link-sd-rgth > li,
                #top-bar .col-12.col-md-2 .top-links.link-sd-rgth > .top-links-item {
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                }

        #top-bar .logo-toll-container {
            order: 0 !important;
            flex: 0 0 auto !important;
            width: auto !important;
            justify-content: flex-start !important;
        }

        /* Shrink logo on small phones so logo + links fit side by side. */
        #top-bar .logo-toll-container #logo img {
            max-height: 28px !important;
            width: auto !important;
        }

        #top-bar .header-misc {
            order: 2 !important;
            flex: 1 0 100% !important;
        }
    }

    /* Small viewports: hide text labels for Compare and Sign-in links, show icons only. */
    @media (max-width: 900px) {
        
        /* Tighten register button and icon-only links on narrow screens. */
        #top-bar .top-links-item > a.top-register-btn {
            font-size: 12px !important;
            padding: 3px 7px !important;
            line-height: 18px !important;
        }

        #top-bar .top-links-item > a {
            padding: 0 3px !important;
        }

        #top-bar.top_bar {
            padding: 6px 8px !important;
        }

        #top-bar .logo-toll-container {
            gap: 12px !important;
            padding: 0 4px !important;
        }

        .top-links-item > a, .top-links-item .select2-selection__rendered {
            font-size: 13px !important;
            line-height: 18px !important;
        }
    }
@media (max-width: 600px) {
    #top-bar .link-label {
        display: none !important;
    }
     #top-bar .header-misc {
        padding: unset !important;
        margin: 5px 0 !important;
    }
     #top-bar .header-misc #top-search{
        margin: unset !important;
    }
}
    #top-bar .logo-toll-container {
        display: flex;
        align-items: center;
        gap: 40px;
        padding: 0 10px;
    }

    #top-bar .top-nav_cll:hover {
        color: #d0d0d0 !important;
    }

    #top-bar .top-nav_mail:hover, #top-bar a:hover {
        /*color: #d0d0d0 !important;*/
    }

    .top-links-item > a, .top-links-item .select2-selection__rendered {
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 400 !important;
        color: #fff !important;
        text-transform: capitalize !important;
    }

    .top-links-item .select2-selection__rendered {
        line-height: unset !important;
    }

    .top-links-sub-menu.user-drop .top-links-item > a {
        color: unset !important;
        font-size: 12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #top-bar .top-links-item > a.top-register-btn {
        background: #f0bc5d !important;
        color: #1f1f1f !important;
        font-weight: 600 !important;
        border-radius: 4px !important;
        padding: 6px 12px !important;
        line-height: 20px !important;
        text-transform: none !important;
    }

        #top-bar .top-links-item > a.top-register-btn:hover,
        #top-bar .top-links-item > a.top-register-btn:focus {
            background: #e3aa44 !important;
            color: #111 !important;
        }

    #top-bar.top_bar .top-login-item {
        position: relative !important;
    }

        #top-bar.top_bar .top-login-item .top-login-dialog {
            display: none !important;
            position: absolute !important;
            top: 100% !important;
            right: 0 !important;
            min-width: 200px !important;
            padding: 12px !important;
            background-color: #fff !important;
            border: 1px solid #e2e2e2 !important;
            border-radius: 4px !important;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
            text-align: left !important;
            z-index: 9999 !important;
        }

            #top-bar.top_bar .top-login-item .top-login-dialog::before {
                content: "" !important;
                position: absolute !important;
                top: -8px !important;
                left: 0 !important;
                right: 0 !important;
                height: 8px !important;
            }

            #top-bar.top_bar .top-login-item .top-login-dialog::after {
                content: "" !important;
                position: absolute !important;
                top: -7px !important;
                right: 18px !important;
                width: 0 !important;
                height: 0 !important;
                border-left: 7px solid transparent !important;
                border-right: 7px solid transparent !important;
                border-bottom: 7px solid #fff !important;
            }

        #top-bar.top_bar .top-login-item:hover .top-login-dialog,
        #top-bar.top_bar .top-login-item:focus-within .top-login-dialog {
            display: block !important;
            text-align: center !important;
        }

        #top-bar.top_bar .top-login-item .top-login-btn {
            display: inline-block !important;
            padding: 8px 14px !important;
            margin-bottom: 10px !important;
            background-color: #089CE9 !important;
            border-radius: 4px !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            line-height: 18px !important;
            color: #fff !important;
            text-transform: none !important;
            width: 100% !important;
        }

            #top-bar.top_bar .top-login-item .top-login-btn:hover,
            #top-bar.top_bar .top-login-item .top-login-btn:focus {
                background-color: #0e5981 !important;
                color: #fff !important;
            }

        #top-bar.top_bar .top-login-item .top-login-register {
            margin: 0 !important;
            font-size: 13px !important;
            line-height: 18px !important;
            color: #393939 !important;
            text-transform: none !important;
        }

            #top-bar.top_bar .top-login-item .top-login-register a {
                color: #089CE9 !important;
                font-size: 13px !important;
                font-weight: 600 !important;
                text-transform: none !important;
            }

                #top-bar.top_bar .top-login-item .top-login-register a:hover,
                #top-bar.top_bar .top-login-item .top-login-register a:focus {
                    color: #0e5981 !important;
                }

    .top-links-sub-menu.user-drop {
        width: 200px !important;
        text-align: left !important;
        right: 0 !important;
        left: auto !important;
    }

    #top-search .search-field,
    #top-search .input-group {
        margin: 0 !important;
        background: transparent !important;
        border-radius: 4px !important;
    }

    #top-search .frm-search.search-form .input-group {
        width: 40vw !important;
        min-width: 40vw !important;
        max-width: 40vw !important;
    }

    #top-search .frm-search.search-form,
    #top-search .input-group.search-field {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    #top-bar .header-misc #top-search.sticky-search-box,
    #top-bar .header-misc .sticky-search-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    #top-search .input-group.search-field {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

        #top-search .input-group.search-field > input,
        #top-search .input-group.search-field > .form-control,
        #top-search .input-group.search-field > .search,
        #top-search .input-group.search-field .form-control.search {
            flex: 1 1 auto !important;
            width: 100% !important;
            min-width: 0 !important;
        }

        #top-search .input-group.search-field > .input-group-append.search-button,
        #top-search .input-group.search-field > .search-button {
            flex: 0 0 auto !important;
            display: flex !important;
        }

    #top-bar .sticky-search-box,
    #top-search.sticky-search-box,
    #top-search {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

        #top-search .input-group.search-field,
        #top-search .input-group.search-field:focus-within {
            position: static !important;
            left: auto !important;
            right: auto !important;
            top: auto !important;
            transform: none !important;
            margin: 0 !important;
        }

        #top-search input.form-control,
        #top-search input[type="search"] {
            border: 1px solid #6f7881 !important;
            border-right: 0 !important;
            border-radius: 4px 0 0 4px !important;
            background-color: #f5f6f7 !important;
            box-shadow: none !important;
            margin: 0 !important;
        }

        #top-search .btn,
        #top-search input.btn.bdr-rad {
            border: 1px solid #6f7881 !important;
            border-left: 0 !important;
            border-radius: 0 4px 4px 0 !important;
            background-color: #f0bc5d !important;
            box-shadow: none !important;
            margin: 0 !important;
        }

            #top-search input.form-control:focus,
            #top-search input[type="search"]:focus,
            #top-search .btn:focus {
                outline: 0 !important;
                box-shadow: none !important;
                transform: none !important;
            }


    /*.header-misc {
	margin-left: 0;
	width: 253px;
	justify-content: flex-end;
}*/

    .input-group {
        display: flex !important;
    }

    @media (max-width: 1013px) {
        #top-search .frm-search.search-form .input-group,
        .frm-search.search-form .input-group {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }

        #top-bar .header-misc,
        #top-bar #top-search,
        #top-bar #top-search .frm-search.search-form {
            width: 100% !important;
            max-width: 100% !important;
        }
    }

    @media (max-width: 1024px) {
        #top-bar .top-nav_cll {
            display: none !important;
        }

        /* R2/category pages: force sticky search row to span full width on tablet/mobile. */
        body.style-21.b2c-layout #top-bar .header-misc,
        body.style-21.b2c-layout #top-bar #top-search,
        body.style-21.b2c-layout #top-bar #top-search .frm-search.search-form,
        body.style-21.b2c-layout #top-bar #top-search .input-group.search-field,
        body.style-21.b2c-layout #top-bar #top-search .search-field {
            width: 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
        }

        body.style-21.b2c-layout #top-bar .header-misc {
            flex: 1 0 100% !important;
        }

        /* R2/category pages: keep input and icon button the same visual height. */
        body.style-21.b2c-layout #top-bar #top-search .input-group.search-field {
            align-items: stretch !important;
        }

        body.style-21.b2c-layout #top-bar #top-search input.form-control,
        body.style-21.b2c-layout #top-bar #top-search input[type="search"],
        body.style-21.b2c-layout #top-bar #top-search .btn,
        body.style-21.b2c-layout #top-bar #top-search input.btn.bdr-rad {
            height: 40px !important;
            min-height: 40px !important;
        }

        body.style-21.b2c-layout #top-bar #top-search .btn,
        body.style-21.b2c-layout #top-bar #top-search input.btn.bdr-rad {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
    }

    .style-21.b2c-layout.stretched.loaded.has-plugin-easing.has-plugin-tabs #top-bar .row.justify-content-between.align-items-center {
        display: flex;
        justify-content: space-between;
    }

    /*
 * R2 pages load legacy theme CSS (style.css/mystyle.css) for listing features.
 * These overrides isolate the shared U1 header from global legacy selectors
 * so header rendering matches home layout.
 */
    body.style-21.b2c-layout #header_u1 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* R2 layout: keep page body content visible below menubar. */
    body.style-21.b2c-layout .content-push {
        margin-top: 40px !important;
    }

    body.style-21.b2c-layout #top-bar .search-field {
        margin: 0 !important;
        border: 0 !important;
        height: auto !important;
        background: transparent !important;
    }

    body.style-21.b2c-layout #top-bar .search-button {
        float: none !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        position: static !important;
    }

        body.style-21.b2c-layout #top-bar .search-button .btn {
            width: auto !important;
        }

        body.style-21.b2c-layout #top-bar .search-button .fa,
        body.style-21.b2c-layout #top-bar .search-button i {
            line-height: normal !important;
        }

    @media (min-width: 1025px) {
        body.style-21.b2c-layout #top-bar > .container-fluid > .row {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 0 !important;
            min-height: 46px !important;
        }

        body.style-21.b2c-layout #top-bar #logo {
            flex: 0 0 auto !important;
            width: auto !important;
            margin: 0 !important;
        }

            body.style-21.b2c-layout #top-bar #logo img {
                width: auto !important;
                max-width: 100% !important;
            }

        body.style-21.b2c-layout #top-bar .top-nav_cll {
            display: block !important;
            flex: 0 0 auto !important;
            margin: 0 !important;
            white-space: nowrap !important;
        }

        body.style-21.b2c-layout #top-bar .header-misc {
            flex: 0 0 40vw !important;
            min-width: 40vw !important;
            margin: 0 !important;
            width: 40vw !important;
            max-width: 40vw !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
        }

        body.style-21.b2c-layout #top-bar #top-search {
            width: 100% !important;
            display: flex !important;
            justify-content: center !important;
        }

        body.style-21.b2c-layout #top-bar .frm-search.search-form .input-group {
            width: 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
        }

        body.style-21.b2c-layout #top-search input.form-control,
        body.style-21.b2c-layout #top-search input[type="search"],
        body.style-21.b2c-layout #top-search .btn,
        body.style-21.b2c-layout #top-search input.btn.bdr-rad {
            height: 40px !important;
        }

        body.style-21.b2c-layout #top-search input.form-control,
        body.style-21.b2c-layout #top-search input[type="search"] {
            line-height: 40px !important;
        }

        body.style-21.b2c-layout #top-search .btn,
        body.style-21.b2c-layout #top-search input.btn.bdr-rad {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

            body.style-21.b2c-layout #top-search .btn i,
            body.style-21.b2c-layout #top-search .btn .icon-search {
                line-height: 40px !important;
            }

        body.style-21.b2c-layout #top-bar .col-12.col-md-2 {
            flex: 0 0 auto !important;
            width: auto !important;
            margin-left: 0 !important;
            padding-left: 0 !important;
        }

        body.style-21.b2c-layout #top-bar .link-sd-rgth {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: 14px !important;
        }

            body.style-21.b2c-layout #top-bar .link-sd-rgth > li {
                margin: 0 !important;
            }

        body.style-21.b2c-layout #top-bar .top-links-item > a,
        body.style-21.b2c-layout #top-bar .top-nav_mail,
        body.style-21.b2c-layout #top-bar .top-nav_login,
        body.style-21.b2c-layout #top-bar .header-functionality-entry {
            display: inline-flex !important;
            align-items: center !important;
            line-height: 20px !important;
            white-space: nowrap !important;
        }

        body.style-21.b2c-layout #top-search input {
            border-radius: 4px 0 0 4px !important;
        }

            body.style-21.b2c-layout #top-search .btn,
            body.style-21.b2c-layout #top-search input.btn.bdr-rad {
                border-radius: 0 4px 4px 0 !important;
            }
    }

    /* R2 only: keep cart icon, total and chevron on a single line in menubar. */
    body.style-21.b2c-layout #header_u1 .cart-cont .d-flex.align-items-center {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

        body.style-21.b2c-layout #header_u1 .cart-cont .d-flex.align-items-center > i,
        body.style-21.b2c-layout #header_u1 .cart-cont .d-flex.align-items-center > div {
            display: inline-flex !important;
            align-items: center !important;
        }

    /* Menubar consistency: normalize menu-link padding across U1 and R2 layouts to follow R2 style. */
    .primary-menu .menu-link {
        padding: 14px 30px !important;
    }

    #header_u1 .primary-menu .menu-link {
        padding: 14px 30px !important;
    }

    .primary-menu .menu-item {
        padding: 0 !important;
    }

    #header_u1 .primary-menu .menu-item {
        padding: 0 !important;
    }

    @media (min-width: 1400px) {
        body.style-21.b2c-layout #header_u1 .container {
            width: 1320px;
        }
    }