/* =================================================================
   MIDDLE HEADER — Back Market 1:1 reference (header4)
   Scoped under .bm-mid-header so it does not leak to other headers.
   ================================================================= */

/* Allow the middle header's container to breathe up to 1320px
   (Bootstrap's default xl container max-width is only 1140px). */
.logo-bar-area > .container {
    max-width: 1320px;
    padding-left: 24px;
    padding-right: 24px;
}

/* ---------- Row + 3-column system ---------- */
.bm-mid-header {
    min-height: 76px;
    padding: 6px 0;
    column-gap: 24px;
    background: #fff;
}
.bm-mid-header .py-20px,
.bm-mid-header a.py-20px {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Center shrinks first; left and right never shrink — this is the fix that
   keeps the search bar from overlapping the trade-in pill. */
.bmh-left {
    flex: 0 0 auto;
    justify-content: flex-start;
}
.bmh-center {
    flex: 1 1 auto;
    width: 100%;
    max-width: 520px;
    min-width: 0;
    margin-left: 40px;
    margin-right: 40px;
}
.bmh-right {
    flex: 0 0 auto;
    column-gap: 24px;
    justify-content: flex-end;
}
/* Belt-and-braces: no flex child in the right column may shrink either. */
.bmh-right > * {
    flex-shrink: 0;
}

/* On screens below lg, dissolve the three wrappers so the original
   mobile-first behavior (logo + search trigger overlay) keeps working. */
@media (max-width: 991.98px) {
    .bmh-left,
    .bmh-center,
    .bmh-right {
        display: contents;
    }
}

/* ---------- LEFT: logo ---------- */
.bmh-left .col-auto img#header-logo-preview {
    transition: transform 220ms ease;
}

/* ---------- CENTER: pill search bar (Back Market style) ---------- */
/* High-specificity overrides so .hov-animate-outline, .border-soft-light
   and any homepage-scoped focus/hover rules cannot paint a yellow ring. */
body .bm-mid-header .bmh-center .front-header-search,
body .bm-mid-header .bmh-center .front-header-search:hover,
body .bm-mid-header .bmh-center .front-header-search:focus-within,
body.bm-home .bm-mid-header .bmh-center .front-header-search,
body.bm-home .bm-mid-header .bmh-center .front-header-search:hover,
body.bm-home .bm-mid-header .bmh-center .front-header-search:focus-within {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    animation: none !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}
.bm-mid-header .bmh-center .search-input-box {
    position: relative !important;
    width: 100% !important;
}
/* Belt-and-braces: every state of the input is forced to the pill design.
   Includes #search by id to outrank any page-specific stylesheet that targets the input by id. */
.bm-mid-header .bmh-center .search-input-box input,
.bm-mid-header .bmh-center .search-input-box input.form-control,
.bm-mid-header .bmh-center .search-input-box input.form-control:hover,
.bm-mid-header .bmh-center .search-input-box input.form-control:focus,
.bm-mid-header .bmh-center .search-input-box input.form-control:focus-visible,
.bm-mid-header .bmh-center .search-input-box input.form-control:active,
.bm-mid-header .bmh-center .search-input-box #search,
.bm-mid-header .bmh-center .search-input-box #search:hover,
.bm-mid-header .bmh-center .search-input-box #search:focus,
.bm-mid-header .bmh-center .search-input-box #search:focus-visible,
.bm-mid-header .bmh-center .search-input-box #search:active,
.bm-home .bm-mid-header .bmh-center .search-input-box input.form-control,
.bm-home .bm-mid-header .bmh-center .search-input-box input.form-control:focus,
.bm-home .bm-mid-header .bmh-center .search-input-box #search,
.bm-home .bm-mid-header .bmh-center .search-input-box #search:focus {
    width: 100% !important;
    height: 48px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: #f1f1f4 !important;
    padding: 0 22px 0 48px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #1f2025 !important;
    box-shadow: none !important;
    outline: none !important;
    animation: none !important;
    transition: background 200ms ease, box-shadow 200ms ease !important;
}
.bm-mid-header .bmh-center .search-input-box input.form-control::placeholder {
    color: #6b6e78 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}
.bm-mid-header .bmh-center .search-input-box input.form-control:hover {
    background: #ebebef !important;
}
.bm-mid-header .bmh-center .search-input-box input.form-control:focus {
    background: #fff !important;
    box-shadow: 0 0 0 1.5px #1f2025 !important;
}
/* Move the search icon to the LEFT — flush left, vertically centered. */
.bm-mid-header .bmh-center .search-input-box svg {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    left: 18px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
    color: #1f2025 !important;
}
.bm-mid-header .bmh-center .search-input-box svg path { fill: #1f2025 !important; }
.bm-mid-header .bmh-center .front-header-search > .position-relative {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}
.bm-mid-header .bmh-center .front-header-search form {
    margin: 0 !important;
}

/* ---------- RIGHT: outlined Trade-In pill ---------- */
/* High-specificity selectors so neither Bootstrap nor the theme's
   .btn / .btn-soft-primary rules can squeeze this button. */
.bm-mid-header .bmh-right .bmh-tradein-wrap > a.bmh-tradein,
.bm-home .bm-mid-header .bmh-right .bmh-tradein-wrap > a.bmh-tradein {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 10px !important;

    width: auto !important;
    min-width: 140px !important;
    height: 48px !important;
    padding: 0 24px !important;
    margin: 0 !important;

    background: #fff !important;
    color: #111 !important;
    border: 1.5px solid #111 !important;
    border-radius: 16px !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: visible !important;
    text-overflow: clip !important;

    flex: 0 0 auto !important;

    box-shadow: none !important;
    text-decoration: none !important;
    transition: background 200ms ease !important;
}
.bm-mid-header .bmh-right .bmh-tradein-wrap > a.bmh-tradein > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
.bm-mid-header .bmh-right .bmh-tradein-wrap > a.bmh-tradein .bmh-tradein-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    border: 1.2px solid #1f2025 !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    margin: 0 !important;
}
.bm-mid-header .bmh-right .bmh-tradein-wrap > a.bmh-tradein .bmh-tradein-icon i {
    font-size: 13px !important;
    color: #1f2025 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.bm-mid-header .bmh-right .bmh-tradein-wrap > a.bmh-tradein .bmh-tradein-label {
    display: inline-block !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: visible !important;
}
.bm-mid-header .bmh-right .bmh-tradein-wrap > a.bmh-tradein:hover {
    background: #f6f7f9 !important;
}

/* ---------- Text links: Need help? / For business ---------- */
.bmh-text-link {
    color: #1f2025 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    padding: 8px 0;
    line-height: 1;
    transition: opacity 180ms ease, color 180ms ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.bmh-text-link:hover,
.bmh-text-link:focus {
    color: #1f2025 !important;
    opacity: 0.6;
    text-decoration: none !important;
}

/* ---------- Account icon (strip the bordered circle) ---------- */
.bmh-right .nav-user-info {
    text-decoration: none !important;
    padding: 4px;
}
.bmh-right .nav-user-info .nav-user-img,
.bmh-right .nav-user-info span.nav-user-img {
    width: 26px !important;
    height: 26px !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.bmh-right .nav-user-info .nav-user-img svg {
    width: 22px;
    height: 22px;
}
.bmh-right .nav-user-info .nav-user-img svg path {
    fill: #1f2025 !important;
    transition: fill 180ms ease;
}
.bmh-right .nav-user-info:hover .nav-user-img svg path {
    fill: #4a4c54 !important;
}
/* Logged-in: smaller avatar without the heavy border too */
.bmh-right #nav-user-info .nav-user-img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

/* ---------- Cart: naked icon with badge ---------- */
.bm-cart-compact,
.bm-cart-compact > .dropdown,
.bm-cart-compact > .dropdown > a {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}
.bm-cart-compact {
    position: relative;
    padding: 4px;
}
.bm-cart-compact > .dropdown {
    position: relative;
    display: inline-flex;
}
.bm-cart-compact > .dropdown > a {
    width: auto !important;
    height: auto !important;
    padding: 2px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: opacity 180ms ease;
}
.bm-cart-compact > .dropdown > a:hover,
.bm-cart-compact > .dropdown > a:focus,
.bm-cart-compact > .dropdown > a:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0.65;
}
.bm-cart-compact > .dropdown > a > span:first-child {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bm-cart-compact > .dropdown > a > span:first-child svg {
    width: 22px;
    height: 20px;
    color: #1f2025;
    filter: none !important;
    box-shadow: none !important;
}
.bm-cart-compact > .dropdown > a > span:first-child svg path,
.bm-cart-compact > .dropdown > a > span:first-child svg circle {
    fill: #1f2025 !important;
}
/* Hide the inline price + items text rendered by the shared cart partial */
.bm-cart-compact > .dropdown > a > span:nth-child(2),
.bm-cart-compact > .dropdown > a > .nav-box-text {
    display: none !important;
}
/* Badge populated via JS from .cart-count */
.bm-cart-compact .bm-cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #0d0d0d;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 2px 4px rgba(15, 18, 22, 0.18);
    pointer-events: none;
    transform: scale(0.85);
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bm-cart-compact .bm-cart-badge.is-visible {
    display: inline-flex;
    transform: scale(1);
}

/* ---------- Spacing rhythm between icons (tighter than text links) ---------- */
.bmh-right .nav-user-info {
    margin-left: -4px;
}
.bmh-right .bm-cart-compact {
    margin-left: -8px;
}

/* Vertical alignment of all right-side controls */
.bmh-right .nav-user-info,
.bmh-right .bm-cart-compact,
.bmh-right a.btn-soft-primary,
.bmh-right .bmh-text-link,
.bmh-right .bmh-tradein-wrap {
    align-self: center;
}

/* Hide native Bootstrap dividers around guest login text (legacy markup) */
.bmh-right .border-right.border-soft-light {
    border-right: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .bmh-center {
        max-width: 420px;
        margin-left: 24px;
        margin-right: 24px;
    }
    .bm-mid-header { column-gap: 18px; }
    .bmh-right { column-gap: 16px; }
    .bmh-text-link { font-size: 13.5px; }
}
@media (max-width: 991.98px) {
    .logo-bar-area > .container {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
    .bm-mid-header {
        min-height: 64px;
        padding: 4px 0;
        column-gap: 12px;
    }
    .bmh-center .search-input-box input.form-control {
        height: 46px;
    }
}

/* =================================================================
   BOTTOM BAR — Back Market style category nav + mega dropdown
   ================================================================= */
:root {
    --bm-pink: #c20056;
    --bm-pink-soft: #fbe9f1;
    --bm-text: #1a1a1a;
    --bm-muted: #6b6e78;
    --bm-line: #eceff3;
    --bm-surface: #fff;
}

.bm-bottom-bar {
    position: relative;
    background: var(--bm-surface);
    border-top: 1px solid var(--bm-line);
    border-bottom: 1px solid var(--bm-line);
}
.bm-bottom-bar > .container {
    max-width: 1320px;
    padding-left: 24px;
    padding-right: 24px;
}

/* Single horizontal row — scrolls horizontally only when content overflows */
.bm-bottom-nav {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 4px;
    height: 56px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.bm-bottom-nav::-webkit-scrollbar { display: none; }

/* Each item — anchors AND the More <button> share this class */
.bm-bottom-link,
.bm-bottom-bar .bm-bottom-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 14px;
    flex: 0 0 auto;
    margin: 0;
    background: transparent;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    color: var(--bm-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: color 160ms ease;
}
.bm-bottom-link:hover,
.bm-bottom-link:focus,
.bm-bottom-link:focus-visible {
    color: var(--bm-text);
    text-decoration: none !important;
    outline: none;
}
.bm-bottom-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    background: var(--bm-pink);
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: center;
    transition: opacity 180ms ease, transform 180ms ease;
}
.bm-bottom-link:hover::after,
.bm-bottom-link:focus-visible::after {
    opacity: 0.35;
    transform: scaleX(1);
}
.bm-bottom-link.active {
    color: var(--bm-pink);
    font-weight: 600;
}
.bm-bottom-link.active::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Flash Sale — sparkle in pink, slightly emphasised but not loud */
.bm-bottom-link.bm-flash-link {
    font-weight: 600;
    gap: 8px;
}
.bm-bottom-link.bm-flash-link .bm-flash-icon {
    color: var(--bm-pink);
    flex-shrink: 0;
}
.bm-bottom-link.bm-flash-link:hover {
    color: var(--bm-pink);
}
.bm-bottom-link.bm-flash-link:hover::after {
    opacity: 0.5;
    transform: scaleX(0.7);
}

/* Chevron next to category links that have a subcategory popover */
.bm-bottom-link.has-popover .bm-link-chevron {
    flex-shrink: 0;
    margin-left: 2px;
    opacity: 0.65;
    transition: transform 220ms ease, opacity 160ms ease;
}
.bm-bottom-link.has-popover:hover .bm-link-chevron,
.bm-bottom-link.has-popover.is-open .bm-link-chevron {
    opacity: 1;
}
.bm-bottom-link.has-popover.is-open .bm-link-chevron {
    transform: rotate(180deg);
}

/* Any trigger in its open state — pink text + locked-in underline */
.bm-bottom-link.is-open {
    color: var(--bm-pink);
}
.bm-bottom-link.is-open::after {
    opacity: 1;
    transform: scaleX(1);
}

/* More toggle — chevron rotates when open (same pattern as category chevrons) */
.bm-more-toggle .bm-more-chevron {
    flex-shrink: 0;
    transition: transform 220ms ease;
}
.bm-more-toggle.is-open .bm-more-chevron {
    transform: rotate(180deg);
}

/* ---------- Mega dropdown panel (full-width, sibling of the row)
   Used both by the "More" trigger AND by every category that has subcategories.
   ---------- */
.bm-mega-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bm-surface);
    border-top: 1px solid var(--bm-line);
    box-shadow: 0 24px 48px -12px rgba(15, 18, 22, 0.14);
    padding: 32px 0 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
    z-index: 1030;
}
.bm-mega-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 0s;
}
.bm-mega-panel > .container {
    max-width: 1320px;
    padding-left: 24px;
    padding-right: 24px;
}

.bm-mega-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
}
.bm-mega-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--bm-text);
    letter-spacing: 0;
}
.bm-mega-see-all {
    color: var(--bm-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    transition: color 160ms ease;
}
.bm-mega-see-all:hover,
.bm-mega-see-all:focus {
    color: var(--bm-pink);
    text-decoration: underline !important;
}

.bm-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 24px;
}

.bm-mega-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--bm-text);
    text-decoration: none !important;
    transition: transform 220ms ease;
}
.bm-mega-card:hover,
.bm-mega-card:focus,
.bm-mega-card:focus-visible {
    color: var(--bm-text);
    text-decoration: none !important;
    outline: none;
    transform: translateY(-2px);
}
.bm-mega-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    background: #f4f4f7;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 220ms ease;
}
.bm-mega-card:hover .bm-mega-card-img,
.bm-mega-card:focus-visible .bm-mega-card-img {
    box-shadow: 0 8px 20px rgba(15, 18, 22, 0.10);
}
.bm-mega-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 280ms ease;
}
.bm-mega-card:hover .bm-mega-card-img img {
    transform: scale(1.03);
}
.bm-mega-card-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bm-text);
    transition: color 160ms ease;
}
.bm-mega-card:hover .bm-mega-card-name,
.bm-mega-card.active .bm-mega-card-name {
    color: var(--bm-pink);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .bm-bottom-nav { height: 52px; gap: 2px; }
    .bm-bottom-link { padding: 0 12px; font-size: 14px; }
    .bm-bottom-link::after { left: 12px; right: 12px; }
    .bm-mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .bm-bottom-bar > .container {
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }
    .bm-bottom-nav { height: 48px; gap: 0; }
    .bm-bottom-link { padding: 0 12px; font-size: 13.5px; }
    .bm-bottom-link::after { left: 12px; right: 12px; }
    .bm-mega-panel { padding: 20px 0 24px; }
    .bm-mega-panel > .container { padding-left: 12px; padding-right: 12px; }
    .bm-mega-head { margin-bottom: 16px; }
    .bm-mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }
}

@media (max-width: 575.98px) {
    .bm-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
    .bm-mega-card-img { aspect-ratio: 1 / 1; border-radius: 12px; }
    .bm-mega-card-name { font-size: 14px; }
}

/* ---------- Account hover dropdown: bridge the gap so options stay clickable ---------- */
/* The dropdown drops below the middle bar; this invisible strip keeps a continuous
   hover path from the account button down to the menu (paired with the JS grace delay). */
.hover-user-top-menu .aiz-user-top-menu {
    position: relative;
}
.hover-user-top-menu .aiz-user-top-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -32px;
    height: 32px;
    background: transparent;
}

/* =========================================================
   TOP PROMISE BAR (.bm-topbar) — ported here from bm-home-v4.css so it
   renders identically on EVERY page, not just the homepage. Values are
   inlined (no CSS-variable dependency) so it never falls back to unstyled.
   ========================================================= */
body .top-navbar,
body .bm-topbar,
body .top-navbar[style*="background-color"] {
    background: #F4F5F8 !important;
    background-color: #F4F5F8 !important;
    border-bottom: 1px solid #E8EAF0 !important;
    min-height: 36px !important;
    height: auto !important;
    font-family: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 0 !important;
}
body .bm-topbar .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.bm-topbar-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 36px;
    padding: 6px 0;
    flex-wrap: wrap;
}

/* LEFT navigation */
.bm-topbar-nav {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.bm-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1A1D24 !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
    line-height: 1;
    padding: 4px 0 !important;
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.bm-topbar-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: currentColor;
    transition: width 220ms ease;
}
.bm-topbar-link:hover { color: #5E8A00 !important; }
.bm-topbar-link:hover::after { width: 100%; }
.bm-topbar-link svg { color: #1A1D24; opacity: 0.85; flex-shrink: 0; }
.bm-topbar-link:hover svg { color: #5E8A00; opacity: 1; }

/* RIGHT meta cluster */
.bm-topbar-meta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.bm-topbar-select {
    display: inline-block;
    position: relative;
}
.bm-topbar-select-toggle,
.bm-topbar-select-toggle.dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: #1A1D24 !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1;
    padding: 4px 8px !important;
    border-radius: 6px;
    cursor: pointer;
    transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bm-topbar-select-toggle::after { display: none !important; }
.bm-topbar-select-toggle:hover { background: rgba(0, 0, 0, 0.05); color: #1A1D24 !important; }
.bm-topbar-flag {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.bm-topbar-currency-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: 800;
    color: #5B6471;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #E8EAF0;
}
.bm-topbar-select-toggle svg { color: #5B6471; }

/* Seller + helpline (right side) */
.bm-topbar-seller,
.bm-topbar-help {
    color: #5B6471 !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bm-topbar-seller:hover,
.bm-topbar-help:hover { color: #5E8A00 !important; }
.bm-topbar-help .helpline-label { opacity: 0.85; margin-right: 4px; }
.bm-topbar-help .helpline-number-preview { font-weight: 700; color: #1A1D24; }

/* DROPDOWNS (language + currency) */
body .bm-topbar .dropdown-menu.bm-topbar-dropdown {
    border-radius: 12px !important;
    border: 1px solid #E8EAF0 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
    padding: 8px !important;
    margin-top: 6px !important;
    min-width: 180px;
}
body .bm-topbar .dropdown-menu.bm-topbar-dropdown .dropdown-item {
    border-radius: 8px;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1A1D24 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
body .bm-topbar .dropdown-menu.bm-topbar-dropdown .dropdown-item:hover {
    background: #F4F5F8 !important;
    color: #1A1D24 !important;
}
body .bm-topbar .dropdown-menu.bm-topbar-dropdown .dropdown-item.active {
    background: #F4FCE3 !important;
    color: #5E8A00 !important;
    font-weight: 700 !important;
}

/* Responsive */
@media (max-width: 991px) {
    .bm-topbar-inner { gap: 12px; padding: 6px 0; }
    .bm-topbar-nav { gap: 18px; }
    .bm-topbar-link { font-size: 12.5px !important; }
    .bm-topbar-link svg { width: 12px; height: 14px; }
}
@media (max-width: 767px) {
    .bm-topbar-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .bm-topbar-nav { gap: 14px; }
    .bm-topbar-meta { gap: 12px; align-self: stretch; justify-content: flex-end; }
    .bm-topbar-link { font-size: 12px !important; padding: 4px 0 !important; }
}
@media (max-width: 575px) {
    .bm-topbar-nav { gap: 10px; overflow-x: auto; flex-wrap: nowrap; width: 100%; padding-bottom: 4px; }
    .bm-topbar-nav::-webkit-scrollbar { display: none; }
    .bm-topbar-link { white-space: nowrap; }
}