/* ===================================================================
   FABRIXA MOBILE MENU — v2 (clean rewrite)
   Drop into: brighthub-fabrixa/assets/css/mobile-menu.css
   Replaces the previous version entirely.
   --------------------------------------------------------------------
   What this file does:
     1. Dark-themes BrightHub's mobile header bar + drawer
     2. Coral hamburger icon (cream on tap)
     3. Cream menu items, coral chevrons
     4. Hides the desktop mega-menu on mobile, lets BrightHub's
        native cascading sub-menu work (progressive disclosure)
     5. Cleans up the search field, close button, sub-menu indenting
   =================================================================== */

/* === SECTION 1 v3 — mobile top bar dark navy + coral hamburger + cream logo === */
@media (max-width: 1024px) {
    /* --- Mobile top bar background: dark navy --- */
    html body .pxl-header,
    html body .pxl-header-mobile,
    html body .pxl-mobile-header,
    html body .pxl-header-wrap,
    html body .pxl-header-main,
    html body .pxl-header-mobile-bar,
    html body .pxl-header-bottom,
    html body header.pxl-header,
    html body header[class*="pxl-header"],
    html body .pxl-mobile-header-wrap,
    html body .pxl-header-mobile-section {
        background-color: #18202D !important;
        background: #18202D !important;
    }

    /* --- Hamburger lines: CORAL --- */
    html body .pxl-toggle-mobile-menu span,
    html body .pxl-toggle-mobile-menu::before,
    html body .pxl-toggle-mobile-menu::after,
    html body .pxl-mobile-toggle span,
    html body .pxl-mobile-toggle::before,
    html body .pxl-mobile-toggle::after,
    html body .pxl-menu-mobile-toggle span,
    html body .pxl-mobile-menu-toggle span,
    html body .menu-toggle span,
    html body .menu-toggle::before,
    html body .menu-toggle::after,
    html body .hamburger span,
    html body .hamburger-inner,
    html body .hamburger-inner::before,
    html body .hamburger-inner::after,
    html body [class*="mobile-toggle"] span,
    html body [class*="mobile-toggle"]::before,
    html body [class*="mobile-toggle"]::after,
    html body [class*="mobile-menu-toggle"] span,
    html body [class*="hamburger"] span,
    html body [class*="hamburger"]::before,
    html body [class*="hamburger"]::after {
        background-color: #E95121 !important;
        background: #E95121 !important;
        color: #E95121 !important;
        border-color: #E95121 !important;
    }

    /* Font-icon hamburgers (some BrightHub builds use <i>) */
    html body .pxl-toggle-mobile-menu i,
    html body .pxl-mobile-toggle i,
    html body .menu-toggle i,
    html body [class*="mobile-toggle"] i,
    html body [class*="mobile-menu-toggle"] i {
        color: #E95121 !important;
    }

    /* Tap state — cream feedback */
    html body .pxl-toggle-mobile-menu:active span,
    html body .pxl-toggle-mobile-menu:hover span,
    html body [class*="mobile-toggle"]:active span,
    html body [class*="mobile-toggle"]:hover span {
        background-color: #F0F0F0 !important;
    }

    /* --- Logo: force cream variant visible on dark navy bar AND
     *     constrain size to prevent horizontal stretching on mobile/tablet.
     *     Bug fix 2026-05-06: BrightHub theme's mobile header was scaling
     *     the SVG logo to 100% of container width, distorting the wordmark.
     *     Sizing matches the drawer logo (.pxl-logo-mobile) for visual
     *     consistency between collapsed top bar and opened drawer state. */
    html body .pxl-header .pxl-logo img,
    html body .pxl-header-mobile .pxl-logo img,
    html body [class*="pxl-header"] .pxl-logo img,
    html body [class*="pxl-header"] .pxl-logo a img,
    html body [class*="pxl-header"] .pxl-logo svg,
    html body [class*="pxl-header"] .pxl-logo a svg {
        filter: none !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        max-width: 180px !important;
        object-fit: contain !important;
    }

    /* Constrain the logo wrapper too — some BrightHub layouts apply
     * width:100% to the .pxl-logo container itself, which can stretch
     * any flex/inline child even with the img sizing above. */
    html body .pxl-header .pxl-logo,
    html body .pxl-header-mobile .pxl-logo,
    html body [class*="pxl-header"] .pxl-logo {
        width: auto !important;
        max-width: 200px !important;
        flex: 0 0 auto !important;
    }

    /* If theme outputs both light + dark logo variants, hide the dark one on mobile */
    html body .pxl-header .pxl-logo .pxl-logo-dark,
    html body .pxl-header-mobile .pxl-logo .pxl-logo-dark,
    html body [class*="pxl-header"] .pxl-logo .pxl-logo-dark {
        display: none !important;
    }

/* ===================================================================
   2. DRAWER (the slide-out menu panel)
   =================================================================== */

.pxl-header-menu,
.pxl-header-menu.is-active,
.pxl-header-menu-scroll {
    background: #18202D !important;
    color: #F0F0F0 !important;
}

.pxl-header-menu-scroll {
    padding: 24px !important;
}


/* ===================================================================
   3. CLOSE BUTTON
   =================================================================== */

.pxl-menu-close,
.pxl-menu-close .iconsvg-close,
.pxl-menu-close svg {
    color: #F0F0F0 !important;
    fill: #F0F0F0 !important;
    stroke: #F0F0F0 !important;
}

.pxl-menu-close:hover,
.pxl-menu-close:hover svg {
    color: #E95121 !important;
    fill: #E95121 !important;
    stroke: #E95121 !important;
}

.pxl-menu-close path {
    stroke: currentColor !important;
}


/* ===================================================================
   4. MOBILE LOGO IN DRAWER
   =================================================================== */

.pxl-logo-mobile,
.pxl-logo-mobile a {
    background: transparent !important;
    display: inline-block !important;
}

.pxl-logo-mobile img,
.pxl-logo-mobile a img,
.pxl-logo-mobile svg {
    filter: none !important;
    opacity: 1 !important;
    max-width: 180px !important;
    height: auto !important;
}

.pxl-logo-mobile .pxl-logo--dark { display: none !important; }
.pxl-logo-mobile .pxl-logo--light { display: inline-block !important; }
.pxl-logo-mobile a:only-child img { display: inline-block !important; }


/* ===================================================================
   5. SEARCH FIELD
   =================================================================== */

.pxl-header-mobile-search-form,
.pxl-header-mobile-search,
.pxl-header-menu-scroll form[role="search"] {
    background: #1F2937 !important;
    border: 1px solid rgba(240, 240, 240, 0.08) !important;
    border-radius: 2px !important;
    margin-bottom: 8px !important;
}

.pxl-header-mobile-search-form input[type="search"],
.pxl-header-menu-scroll input[type="search"],
.pxl-header-mobile-search-form input[type="text"] {
    background: transparent !important;
    color: #F0F0F0 !important;
    border: 0 !important;
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-size: 16px !important;
    padding: 14px 18px !important;
}

.pxl-header-mobile-search-form input::placeholder,
.pxl-header-menu-scroll input::placeholder {
    color: #9AA4B2 !important;
}

.pxl-header-mobile-search-form input:focus { outline: none !important; }

.pxl-header-mobile-search-form button,
.pxl-header-mobile-search-form input[type="submit"] {
    background: #E95121 !important;
    color: #18202D !important;
    border: 0 !important;
    padding: 0 18px !important;
}


/* ===================================================================
   6. MOBILE MENU LINKS (top-level)
   =================================================================== */

.pxl-header-menu .pxl-menu__primary,
.pxl-header-nav .pxl-menu__primary,
.pxl-header-menu nav.pxl-header-nav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pxl-header-menu .pxl-menu__primary > li,
.pxl-header-menu .pxl-menu__primary li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(240, 240, 240, 0.06) !important;
}

.pxl-header-menu .pxl-menu__primary li a,
.pxl-header-menu .pxl-menu__primary > li > a,
.pxl-header-menu .pxl-menu__primary span,
.pxl-header-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    color: #F0F0F0 !important;
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-size: 1.0625rem !important;
    font-weight: 500 !important;
    padding: 18px 4px !important;
    text-decoration: none !important;
    transition: color .15s ease;
}

.pxl-header-menu .pxl-menu__primary li a:hover,
.pxl-header-menu .pxl-menu__primary li.current-menu-item > a,
.pxl-header-nav a:hover {
    color: #E95121 !important;
}


/* ===================================================================
   7. EXPAND CHEVRONS — coral
   =================================================================== */

.pxl-header-menu .caseicon-angle-arrow-down,
.pxl-header-menu .pxl-icon-toggle,
.pxl-header-menu .menu-item-has-children > a > i,
.pxl-header-menu li.menu-item-has-children > a > .caseicon-angle-arrow-down,
.pxl-header-menu li.menu-item-has-children > a i {
    color: #E95121 !important;
    font-size: 1rem !important;
    margin-left: auto !important;
    display: inline-block !important;
    transition: transform .2s ease;
    flex-shrink: 0;
}

.pxl-header-menu li.menu-item-has-children.is-active > a .caseicon-angle-arrow-down,
.pxl-header-menu li.menu-item-has-children.open > a .caseicon-angle-arrow-down {
    transform: rotate(180deg);
    color: #E95121 !important;
}


/* ===================================================================
   8. SUB-MENU CASCADE (the native progressive disclosure)
   =================================================================== */

.pxl-header-menu .pxl-menu__primary .sub-menu {
    background: rgba(0, 0, 0, 0.18) !important;
    margin: 0 -4px !important;
    padding: 4px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(240, 240, 240, 0.04) !important;
    list-style: none !important;
}

.pxl-header-menu .pxl-menu__primary .sub-menu li {
    border-bottom: 1px solid rgba(240, 240, 240, 0.04) !important;
}

.pxl-header-menu .pxl-menu__primary .sub-menu li:last-child {
    border-bottom: 0 !important;
}

.pxl-header-menu .pxl-menu__primary .sub-menu a {
    padding-left: 28px !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    color: #F0F0F0 !important;
}

.pxl-header-menu .pxl-menu__primary .sub-menu a:hover {
    color: #E95121 !important;
}

.pxl-header-menu .pxl-menu__primary .sub-menu .sub-menu a {
    padding-left: 48px !important;
    font-size: 0.875rem !important;
    color: #9AA4B2 !important;
}


/* ===================================================================
   9. HIDE THE DESKTOP MEGA-MENU ON MOBILE
   --------------------------------------------------------------------
   The Elementor mega-menu template is desktop-only. On mobile we let
   the native cascading sub-menu (Section 8 above) take over. This
   means tap Products → see Apparel/Home & Living/Fabrics, tap Apparel
   → see Tees & Tops/Hoodies/etc. Progressive disclosure, mobile-native.
   =================================================================== */

@media (max-width: 1024px) {
    html body .pxl-header-menu .fbx-megamenu,
    html body .pxl-header-menu-scroll .fbx-megamenu,
    html body .pxl-header-menu .elementor-widget-shortcode,
    html body .pxl-header-menu-scroll .elementor-widget-shortcode,
    html body .pxl-header-menu .pxl-mega-menu,
    html body .pxl-header-menu-scroll .pxl-mega-menu,
    html body .pxl-header-menu .elementor-section,
    html body .pxl-header-menu-scroll .elementor-section {
        display: none !important;
    }
}


/* ===================================================================
   10. BACKDROP
   =================================================================== */

.pxl-header-menu-backdrop,
.pxl-overlay-mobile {
    background: rgba(24, 32, 45, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* ===================================================================
   11. MOBILE STICKY HEADER
   =================================================================== */

@media (max-width: 1024px) {
    .pxl-header-elementor-sticky,
    .pxl-onepage-sticky {
        background: #18202D !important;
        border-bottom: 1px solid rgba(240, 240, 240, 0.08) !important;
    }
}


/* ===================================================================
   12. PREVENT BODY SCROLL when drawer open
   =================================================================== */

body.pxl-mobile-menu-open,
body.pxl-menu-active {
    overflow: hidden !important;
}


/* ===================================================================
   13. KILL DUPLICATE / EMPTY WRAPPERS in drawer
   =================================================================== */

.pxl-header-menu-scroll > div:empty,
.pxl-header-menu-scroll > form:empty,
.pxl-header-mobile-search-form + form,
.pxl-header-mobile-search-form ~ .pxl-header-mobile-search-form {
    display: none !important;
}

/* === SECTION 14 v5 — chevron centered + coral, height set by JS === */
@media (max-width: 1024px) {
    html body .pxl-menu__primary li.menu-item-has-children,
    html body .menu-mobile li.menu-item-has-children,
    html body .pxl-mobile-menu li.menu-item-has-children {
        display: block !important;
        flex-wrap: initial !important;
        position: relative !important;
    }

    html body .pxl-menu__primary li.menu-item-has-children > a,
    html body .menu-mobile li.menu-item-has-children > a,
    html body .pxl-mobile-menu li.menu-item-has-children > a {
        flex: initial !important;
        display: block !important;
        padding-right: 60px !important;
        min-width: 0 !important;
    }

    html body .pxl-menu__primary li.menu-item-has-children > .sub-menu,
    html body .pxl-menu__primary li.menu-item-has-children > ul {
        flex: initial !important;
        width: auto !important;
    }

    /* Chevron container — JS sets height to match <a>; CSS handles the rest */
    html body .pxl-menu__primary li.menu-item-has-children > .pxl-menu-toggle,
    html body .pxl-menu__primary li.menu-item-has-children > [class*="toggle"],
    html body .pxl-menu__primary li.menu-item-has-children > [class*="arrow"],
    html body .pxl-menu__primary li.menu-item-has-children > .pxl-anchor-divider {
        position: absolute !important;
        top: 0 !important;
        right: 12px !important;
        left: auto !important;
        bottom: auto !important;
        width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        background: transparent !important;
        color: #E95121 !important;
    }

    /* Color the chevron icon coral (inner <i>/<span>) */
    html body .pxl-menu__primary li.menu-item-has-children > .pxl-anchor-divider *,
    html body .pxl-menu__primary li.menu-item-has-children > .pxl-menu-toggle *,
    html body .pxl-menu__primary li.menu-item-has-children > [class*="toggle"] *,
    html body .pxl-menu__primary li.menu-item-has-children > [class*="arrow"] * {
        color: #E95121 !important;
    }

    /* Rotate the inner icon when parent is open */
    html body .pxl-menu__primary li.menu-item-has-children.open > .pxl-anchor-divider > *,
    html body .pxl-menu__primary li.menu-item-has-children.open > .pxl-menu-toggle > *,
    html body .pxl-menu__primary li.menu-item-has-children.open > [class*="toggle"] > *,
    html body .pxl-menu__primary li.menu-item-has-children.open > [class*="arrow"] > * {
        transform: rotate(180deg) !important;
        transition: transform 0.2s ease !important;
    }
}
	
	/* === SECTION 1b v2 — BrightHub hamburger: 3 coral bars, evenly spaced === */
@media (max-width: 1024px) {
    /* Container — flex column, even spacing */
    html body .pxl-nav-mobile-button {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        width: 30px !important;
        height: 21px !important;
        padding: 0 !important;
        cursor: pointer !important;
    }

    /* Each bar — coral, 3px tall, full width */
    html body .pxl-nav-mobile-button .pxl-icon-line,
    html body .pxl-icon-line,
    html body .pxl-icon-line1,
    html body .pxl-icon-line2,
    html body .pxl-icon-line3 {
        background-color: #E95121 !important;
        background: #E95121 !important;
        height: 3px !important;
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 2px !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Tap state — cream feedback */
    html body .pxl-nav-mobile-button:active .pxl-icon-line,
    html body .pxl-nav-mobile-button:hover .pxl-icon-line {
        background-color: #F0F0F0 !important;
    }
}

/* === SECTION 16 v2 — last menu item has breathing room above iOS URL bar === */
@media (max-width: 1024px) {
    html body .pxl-menu__primary > li:last-child,
    html body .pxl-menu__primary > li:last-of-type,
    html body .pxl-mobile-menu .pxl-menu__primary > li:last-child,
    html body .menu-mobile > li:last-child,
    html body [class*="mobile-menu"] ul > li:last-child {
        margin-bottom: 100px !important;
        padding-bottom: 0 !important;
    }

    /* Also try to make the drawer use dynamic viewport height */
    html body .pxl-mobile-menu,
    html body [class*="mobile-menu-wrap"],
    html body [class*="mobile-nav-wrap"],
    html body .pxl-menu__primary {
        min-height: 100dvh !important;
    }
}

/* === SECTION 16b — UNIVERSAL HEADER COLOUR FIX v2 (2026-05-06) ====
   Wider net: targets BrightHub's pxl-* classes AND Elementor-rendered
   header templates AND the bare <header> element. The black bar in
   the resize video is rendering from the Elementor header template
   whose section/container has its own background colour — which beats
   my pxl-* selectors. Every plausible header-wrapper variant below.
   ================================================================ */
html body header,
html body > header,
html body .pxl-header,
html body .pxl-header-mobile,
html body .pxl-mobile-header,
html body .pxl-header-wrap,
html body .pxl-header-main,
html body .pxl-header-mobile-bar,
html body .pxl-header-bottom,
html body .pxl-header-top,
html body header.pxl-header,
html body header[class*="pxl-header"],
html body .pxl-mobile-header-wrap,
html body .pxl-header-mobile-section,
/* Elementor-rendered header variants */
html body .elementor-location-header,
html body .elementor-location-header > .elementor,
html body .elementor-location-header .elementor-section,
html body .elementor-location-header .elementor-container,
html body .pxl-header-elementor,
html body .pxl-elementor-header,
html body .pxl-header-elementor-sticky,
html body .pxl-header-elementor > .elementor-section,
html body .pxl-elementor-stickymenu,
/* Any element with a [data-elementor-type="header"] descendant background */
html body [data-elementor-type="header"],
html body [data-elementor-type="header"] > section,
html body [data-elementor-type="header"] .elementor-section:first-child {
    background-color: #18202D !important;
    background: #18202D !important;
}

/* === SECTION 16c — REMOVE EMPTY PAGE-TITLE BAR (2026-05-06) =======
   BrightHub auto-renders a default page-title block (#pxl-ptit__default)
   between the nav and the page content. Some templates hide it via
   inline <style>, but it was leaking through on others (notably the
   product hub) where there's no template-level hide rule. Hide it
   site-wide.
   ================================================================ */
html body #pxl-ptit__default,
html body .pxl-ptit__default,
html body .pxl-page-title-default,
html body .pxl-page-header__default,
html body .pxl-default-page-title {
    display: none !important;
}

/* Also collapse any vertical space the wrapper may reserve */
html body .pxl-page-title-bar:empty,
html body .pxl-page-header:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* === SECTION 16d — LOGO SIZING ACROSS ALL WIDTHS (2026-05-06) ======
   Match the drawer logo size everywhere a mobile/tablet header shows. */
@media (max-width: 1280px) {
    html body header .pxl-logo img,
    html body header .pxl-logo a img,
    html body header .pxl-logo svg,
    html body [class*="pxl-header"] .pxl-logo img,
    html body [class*="pxl-header"] .pxl-logo a img,
    html body [class*="pxl-header"] .pxl-logo svg {
        width: auto !important;
        height: auto !important;
        max-width: 180px !important;
        max-height: 60px !important;
        object-fit: contain !important;
    }

    /* Hamburger lines coral when the mobile header is showing */
    html body .pxl-toggle-mobile-menu span,
    html body .pxl-mobile-toggle span,
    html body [class*="mobile-toggle"] span,
    html body [class*="hamburger"] span,
    html body .pxl-nav-mobile-button .pxl-icon-line,
    html body .pxl-icon-line {
        background-color: #E95121 !important;
    }
}

/* === SECTION 17 — TABLET MENU FIX (2026-05-06) ====================
   At tablet width (768–1024px) the drawer was rendering the desktop
   mega-menu inside it, producing a cramped 3-column layout. Force ALL
   sub-menus inside the drawer to render as a vertical stack regardless
   of any inherited flex/grid styles, and aggressively hide any
   mega-menu container the drawer might have inherited.
   ================================================================ */
@media (max-width: 1024px) {

    /* Force every <ul.sub-menu> inside the drawer to be a vertical column.
     * This neutralises any flex/grid layout coming from desktop styles. */
    html body .pxl-header-menu .sub-menu,
    html body .pxl-header-menu-scroll .sub-menu,
    html body .pxl-mobile-menu .sub-menu,
    html body [class*="mobile-menu"] .sub-menu,
    html body [class*="mobile-nav"] .sub-menu {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        column-count: 1 !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: rgba(0, 0, 0, 0.18) !important;
        padding: 4px 0 !important;
        margin: 0 -4px !important;
        border-top: 1px solid rgba(240, 240, 240, 0.04) !important;
        list-style: none !important;
        box-shadow: none !important;
    }

    /* Each sub-menu list item must be a full-width row, not a column. */
    html body .pxl-header-menu .sub-menu > li,
    html body .pxl-header-menu-scroll .sub-menu > li,
    html body .pxl-mobile-menu .sub-menu > li,
    html body [class*="mobile-menu"] .sub-menu > li {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        grid-column: 1 / -1 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(240, 240, 240, 0.04) !important;
    }

    /* Make sure sub-menus are HIDDEN by default (only expand when parent
     * is explicitly .open or .is-active). Otherwise the entire mega-menu
     * tree expands on first paint. */
    html body .pxl-header-menu .menu-item-has-children > .sub-menu,
    html body .pxl-header-menu-scroll .menu-item-has-children > .sub-menu {
        display: none !important;
    }
    html body .pxl-header-menu .menu-item-has-children.open > .sub-menu,
    html body .pxl-header-menu .menu-item-has-children.is-active > .sub-menu,
    html body .pxl-header-menu .menu-item-has-children.pxl-active > .sub-menu,
    html body .pxl-header-menu-scroll .menu-item-has-children.open > .sub-menu,
    html body .pxl-header-menu-scroll .menu-item-has-children.is-active > .sub-menu,
    html body .pxl-header-menu-scroll .menu-item-has-children.pxl-active > .sub-menu {
        display: block !important;
    }

    /* Hide ANY mega-menu container variant (Elementor, BrightHub custom,
     * widget shortcode, fbx-megamenu, anything with "mega" in the class).
     * This is the safety net — if the drawer accidentally renders a mega
     * panel, it will not be visible. */
    html body .pxl-header-menu [class*="mega"],
    html body .pxl-header-menu-scroll [class*="mega"],
    html body .pxl-mobile-menu [class*="mega"],
    html body .pxl-header-menu .fbx-megamenu,
    html body .pxl-header-menu-scroll .fbx-megamenu,
    html body .pxl-header-menu .pxl-mega-menu,
    html body .pxl-header-menu-scroll .pxl-mega-menu,
    html body .pxl-header-menu .pxl-megamenu,
    html body .pxl-header-menu-scroll .pxl-megamenu,
    html body .pxl-header-menu .elementor-widget-shortcode,
    html body .pxl-header-menu-scroll .elementor-widget-shortcode,
    html body .pxl-header-menu .elementor-section,
    html body .pxl-header-menu-scroll .elementor-section,
    html body .pxl-header-menu .elementor-container,
    html body .pxl-header-menu-scroll .elementor-container {
        display: none !important;
    }
}

/* === SECTION 18 — LOGO SIZING REINFORCEMENT (2026-05-06) ==========
   Earlier mobile-menu.css logo rules weren't always winning over
   BrightHub's inline styles / theme options. This is a stronger, more
   specific override using the BrightHub logo wrappers directly.
   ================================================================ */
@media (max-width: 1024px) {
    /* Logo image in the top mobile bar (collapsed state) */
    html body .pxl-header .pxl-header-logo img,
    html body .pxl-header .pxl-site-logo img,
    html body .pxl-header .custom-logo,
    html body .pxl-header .custom-logo-link img,
    html body .pxl-header-mobile .pxl-header-logo img,
    html body .pxl-header-mobile .pxl-site-logo img,
    html body .pxl-mobile-header .pxl-logo img,
    html body header .pxl-logo a img,
    html body header .pxl-logo img {
        width: auto !important;
        height: auto !important;
        max-width: 180px !important;
        max-height: 60px !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    /* Wrapper widths — neutralise any width: 100% or flex: 1 from the theme */
    html body .pxl-header .pxl-header-logo,
    html body .pxl-header .pxl-site-logo,
    html body .pxl-header .custom-logo-link,
    html body .pxl-header-mobile .pxl-header-logo,
    html body .pxl-header-mobile .pxl-site-logo,
    html body header .pxl-logo,
    html body header .pxl-logo a {
        width: auto !important;
        max-width: 200px !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}