/**
 * Storefront mobile/tablet header — loads at end of #mainHeader (after inline header styles).
 * Compact rows + horizontal scroll so every link stays reachable (nothing hidden).
 */

/* Search-row filter button — always visible; color matches each site brand */
html body #mainHeader #filterLink.filter-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--glrcf-header-fg, #007bff) !important;
    -webkit-text-fill-color: var(--glrcf-header-fg, #007bff) !important;
    position: relative !important;
    z-index: 10007 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}
html body #mainHeader #filterLink.filter-btn > i {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: inherit !important;
    background-color: currentColor !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h8V4H4v2zm10 0h6V4h-6v2zM4 13h14v-2H4v2zm16 0h2v-2h-2v2zM4 20h4v-2H4v2zm6 0h10v-2H10v2zM10 8h2v3h-2V8zm12 7h2v3h-2v-3zM6 15h2v3H6v-3z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h8V4H4v2zm10 0h6V4h-6v2zM4 13h14v-2H4v2zm16 0h2v-2h-2v2zM4 20h4v-2H4v2zm6 0h10v-2H10v2zM10 8h2v3h-2V8zm12 7h2v3h-2v-3zM6 15h2v3H6v-3z'/%3E%3C/svg%3E") !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}
/* Site brand fallbacks when CSS vars are unset */
html body.muslimancestry-site #mainHeader #filterLink.filter-btn {
    color: #7c3aed !important;
    -webkit-text-fill-color: #7c3aed !important;
}
html body.nikahfinder-site #mainHeader #filterLink.filter-btn {
    color: #db2777 !important;
    -webkit-text-fill-color: #db2777 !important;
}
html body.ilearnfree-page #mainHeader #filterLink.filter-btn {
    color: #667eea !important;
    -webkit-text-fill-color: #667eea !important;
}

@media (min-width: 993px) {
    /* Desktop: Academy / Research / Health — hover + caret open (no mobile portal overrides) */
    html body #mainHeader #navigator-container .aeris-academy-nav .aeris-academy-dropdown {
        display: none;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        min-width: 220px !important;
        z-index: 999999 !important;
    }
    html body #mainHeader #navigator-container .aeris-academy-nav:hover .aeris-academy-dropdown,
    html body #mainHeader #navigator-container .aeris-academy-nav.aeris-academy-open .aeris-academy-dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* header-main.css sets align-self:flex-end on the nav row (pushes it to the right on desktop) */
    html body #mainHeader #headerMiddlePanel .header-second-row,
    html body #mainHeader #headerSecondRow {
        align-self: stretch !important;
        width: 100% !important;
        left: 0 !important;
        margin-left: 0 !important;
        justify-content: center !important;
        padding-left: 220px !important;
        padding-right: 220px !important;
    }

    html body #mainHeader .header-second-row {
        left: 0 !important;
        justify-content: center !important;
        padding-left: 220px !important;
        padding-right: 220px !important;
    }

    html body #mainHeader .header-second-row .header-center {
        width: 100% !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    html body #mainHeader .header-center {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    html body #mainHeader .logo-wrapper {
        position: absolute !important;
        left: 10px !important;
        bottom: 4px !important;
        top: auto !important;
        z-index: 10001 !important;
    }

    html body #mainHeader #navigator-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: space-evenly !important;
        overflow: visible !important;
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        gap: 0 !important;
    }

    html body #mainHeader #navigator-container .nav-item {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: auto !important;
        min-width: auto !important;
        justify-content: center !important;
    }

    html body #mainHeader #navigator-container .at-nav-mobile-only {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html body #mainHeader #navigator-container .nav-item {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body #mainHeader #navigator-container .nav-item,
    html body #mainHeader .header-second-row .nav-item {
        display: inline-flex !important;
        flex-direction: row !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        align-self: auto !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        background: transparent !important;
        contain: none !important;
    }

    html body #mainHeader #navigator-container .nav-btn,
    html body #mainHeader .header-second-row .nav-btn {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        width: auto !important;
        padding: 2px 6px !important;
        white-space: nowrap !important;
        text-align: center !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    html body #mainHeader #navigator-container .nav-btn > i:not(.fa-caret-down),
    html body #mainHeader .header-second-row .nav-btn > i:not(.fa-caret-down) {
        display: none !important;
        margin: 0 !important;
        order: 0 !important;
    }

    html body #mainHeader #navigator-container .storefront-nav-label,
    html body #mainHeader .header-second-row .storefront-nav-label {
        display: none !important;
    }

    html body #mainHeader #navigator-container .academy-caret-btn {
        display: inline-flex !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html body #mainHeader .header-second-row .nav-text {
        display: inline !important;
    }

    html body #mainHeader #SmartHamburger,
    html body #mainHeader #sidebarToggleBtn,
    html body #mainHeader .mobile-header-btn-inline {
        display: none !important;
    }

    /* Desktop hover menus (Preferences, Auction, Sales) */
    html body #mainHeader .header-top-bar {
        overflow: visible !important;
        position: relative !important;
        z-index: 300 !important;
    }

    html body #mainHeader .header-top-bar .top-bar-dropdown-wrap:hover .top-bar-dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    html body #mainHeader #headerMiddlePanel .header-row1 {
        position: relative !important;
        z-index: 100 !important;
    }

    /* Undo mobile search shrink — restore header.php desktop widths */
    html body #mainHeader .hamburger-search-wrapper {
        padding-left: 220px !important;
        padding-right: 220px !important;
        margin-left: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    html body #mainHeader .search-filter-container {
        max-width: 1460px !important;
        min-width: 965px !important;
        width: auto !important;
    }

    html body #mainHeader #searchWrapper {
        flex: 1 1 1215px !important;
        min-width: 883px !important;
        max-width: none !important;
        width: auto !important;
    }

    html body #mainHeader .search-box {
        min-width: 883px !important;
        max-width: none !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    html body #mainHeader #searchCategory {
        border-radius: 0 16px 16px 0 !important;
    }

    html body #mainHeader .header-row1,
    html body #mainHeader .mobile-header-row1 {
        margin-top: 0 !important;
    }

    html body #mainHeader #filterLink.filter-btn {
        flex: 0 0 auto !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        font-size: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body #mainHeader #navigator-container .nav-item-dropdown .nav-dropdown,
    html body #mainHeader #navigator-container .nav-item-dropdown .at-nav-dropdown-menu {
        display: none;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
    }

    html body #mainHeader #navigator-container .nav-item-dropdown:hover .nav-dropdown,
    html body #mainHeader #navigator-container .nav-item-dropdown.at-nav-dropdown-hover > .nav-dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    html body #mainHeader #navigator-container .nav-item-dropdown:hover .at-nav-dropdown-menu,
    html body #mainHeader #navigator-container .nav-item-dropdown.at-nav-dropdown-hover > .at-nav-dropdown-menu,
    html body #mainHeader #navigator-container .nav-item-dropdown .at-nav-dropdown-menu:hover {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 992px) {
    html body:not(.ilearnfree-page):not(.academy-page):not(.nikahfinder-home-page) #mainHeader {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 112px !important;
        min-height: 112px !important;
        max-height: 112px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    html body:not(.ilearnfree-page):not(.academy-page):not(.nikahfinder-home-page) #mainHeader #ufoHeaderContent.header-container {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: visible !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        gap: 5px !important;
        box-sizing: border-box !important;
    }

    html body #mainHeader #headerMiddlePanel .header-row1,
    html body #mainHeader #headerMiddlePanel .mobile-header-row1,
    html body header#mainHeader #headerMiddlePanel .header-row1 {
        background: transparent !important;
        background-color: transparent !important;
    }

    html body #mainHeader #headerMiddlePanel {
        width: calc(100% - 8px) !important;
        max-width: calc(100% - 8px) !important;
        margin: 0 4px !important;
        padding: 0 4px !important;
        gap: 5px !important;
        position: relative !important;
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
        flex: 1 1 auto !important;
        overflow: visible !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        transform: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
        box-sizing: border-box !important;
    }

    html body #mainHeader #headerMiddlePanel:hover {
        transform: none !important;
    }

    /* Row 1 — left utility icons | brand | right utility icons */
    html body #mainHeader .header-top-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
        min-height: 36px !important;
        max-height: none !important;
        height: auto !important;
        margin-top: 0 !important;
        padding: 4px 6px !important;
        gap: 4px !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        order: 0 !important;
        flex-shrink: 0 !important;
        position: relative !important;
        top: 0 !important;
    }

    html body #mainHeader .header-top-bar .top-bar-left,
    html body #mainHeader .header-top-bar .top-bar-right {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        gap: 2px !important;
        flex-wrap: nowrap !important;
    }

    html body #mainHeader .header-top-bar .top-bar-left {
        justify-content: flex-start !important;
    }

    html body #mainHeader .header-top-bar .top-bar-right {
        justify-content: flex-end !important;
    }

    html body #mainHeader .header-top-bar .top-bar-right > span,
    html body #mainHeader .header-top-bar .cell.right,
    html body #mainHeader .header-top-bar #bookmarkWrapper {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }

    html body #mainHeader .header-top-bar .top-bar-dropdown-wrap {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        position: relative !important;
        overflow: visible !important;
    }

    html body #mainHeader .header-top-bar .top-bar-left > a,
    html body #mainHeader .header-top-bar .top-bar-left > .top-bar-dropdown-wrap > a,
    html body #mainHeader .header-top-bar .top-bar-right > .top-bar-dropdown-wrap > a {
        flex: 0 0 auto !important;
        min-width: 32px !important;
        min-height: 32px !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px !important;
    }

    html body #mainHeader .header-top-bar .top-bar-brand-mobile {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 40% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    html body #mainHeader .header-top-bar .top-bar-left a,
    html body #mainHeader .header-top-bar .top-bar-right > a,
    html body #mainHeader .header-top-bar .top-bar-dropdown-wrap > a {
        font-size: 0 !important;
        padding: 4px !important;
        min-height: 32px !important;
        min-width: 32px !important;
        justify-content: center !important;
        gap: 0 !important;
        white-space: nowrap !important;
    }

    html body #mainHeader .header-top-bar a i {
        font-size: 14px !important;
        opacity: 1 !important;
        margin: 0 !important;
    }

    html body #mainHeader .header-top-bar a .fa-caret-down {
        display: none !important;
    }

    html body #mainHeader .header-top-bar .sep {
        display: none !important;
    }

    html body #mainHeader .header-top-bar .top-bar-right a[title="Open Right Sidebar"],
    html body #mainHeader .header-top-bar .top-bar-right > span {
        display: none !important;
    }

    html body #mainHeader .header-top-bar .header-icon-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    html body #mainHeader .header-top-bar .header-icon-btn i {
        font-size: 14px !important;
    }

    html body #mainHeader .header-top-bar .header-icon-btn .badge-count {
        top: 0 !important;
        right: 0 !important;
    }

    body .at-top-bar-dropdown-mobile-panel {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body .at-top-bar-dropdown-mobile-panel a {
        font-size: 11px !important;
        display: block !important;
        padding: 6px 10px !important;
        color: #333 !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    body .at-top-bar-dropdown-mobile-panel a i {
        font-size: 11px !important;
        margin-right: 5px !important;
    }

    /* Left + right nav drawers — fit link text */
    #leftNavDrawer,
    #rightNavDrawer {
        width: max-content !important;
        min-width: 180px !important;
        max-width: calc(100vw - 16px) !important;
        box-sizing: border-box !important;
    }

    #rightNavDrawer > div:first-child {
        padding: 10px 12px !important;
    }

    #rightNavDrawer h3 {
        font-size: 14px !important;
    }

    #rightNavDrawer li {
        padding: 0 !important;
    }

    #rightNavDrawer li a {
        font-size: 13px !important;
        gap: 8px !important;
    }

    /* Row 2 — logo slot + search */
    html body #mainHeader .mobile-header-row1,
    html body #mainHeader .header-row1 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 30px !important;
        max-height: 32px !important;
        padding: 0 2px 0 52px !important;
        gap: 2px !important;
        margin-top: -5px !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        order: 1 !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    html body #mainHeader #expandedBrandLockup {
        display: none !important;
    }

    html body #mainHeader .logo-wrapper {
        display: flex !important;
        position: absolute !important;
        left: 8px !important;
        bottom: auto !important;
        top: 40px !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        max-width: none !important;
        align-items: center !important;
        justify-content: flex-start !important;
        z-index: 10020 !important;
        pointer-events: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        isolation: isolate !important;
    }

    html body #mainHeader .logo-wrapper a {
        display: block !important;
        line-height: 0 !important;
        overflow: visible !important;
    }

    html body #mainHeader .logo-wrapper img {
        height: 30px !important;
        max-height: 30px !important;
        max-width: none !important;
        width: auto !important;
        object-fit: contain !important;
        object-position: left center !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        image-rendering: -webkit-optimize-contrast !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        transform: translateZ(0) !important;
    }

    html body #mainHeader .hamburger-search-wrapper {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: center !important;
    }

    html body #mainHeader .search-filter-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        gap: 4px !important;
    }

    html body #mainHeader #searchWrapper {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 22px) !important;
        width: auto !important;
    }

    html body #mainHeader .search-box {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 auto !important;
    }

    html body #mainHeader #oldSearchInput {
        font-size: 11px !important;
        min-width: 0 !important;
    }

    html body #mainHeader .header-row1,
    html body #mainHeader .mobile-header-row1 {
        position: relative !important;
        z-index: 2 !important;
    }

    html body #mainHeader .hamburger-search-wrapper,
    html body #mainHeader .search-filter-container {
        position: relative !important;
        z-index: 2 !important;
    }

    html body #mainHeader #searchCategory {
        max-width: 92px !important;
        min-width: 72px !important;
        margin-left: 6px !important;
        margin-right: 4px !important;
        height: 22px !important;
        min-height: 0 !important;
        max-height: 22px !important;
        line-height: 20px !important;
        font-size: 11px !important;
        align-self: center !important;
        border-radius: 0 9px 9px 0 !important;
        -webkit-appearance: menulist !important;
        appearance: auto !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        position: relative !important;
        z-index: 3 !important;
        cursor: pointer !important;
    }

    html body #mainHeader .search-box {
        border-radius: 9px !important;
        overflow: hidden !important;
        gap: 4px !important;
    }

    html body #mainHeader #filterLink,
    html body #mainHeader #filterLink.filter-btn {
        display: inline-flex !important;
        flex: 0 0 18px !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        position: relative !important;
        z-index: 10007 !important;
        cursor: pointer !important;
    }

    html body #mainHeader #headerSecondRow,
    html body #mainHeader .header-second-row {
        z-index: 10001 !important;
    }

    html body #mainHeader #filterModalOverlay.active,
    html body #filterModalOverlay.active,
    body > #filterModalOverlay.active,
    body > #filterModalOverlay.filter-modal-overlay.active {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 2147483647 !important;
        pointer-events: auto !important;
        position: fixed !important;
    }

    html body #mainHeader #filterModalOverlay.active #dynamicFilterContent,
    html body #filterModalOverlay.active #dynamicFilterContent {
        z-index: 2147483641 !important;
        pointer-events: auto !important;
    }

    body > #filterModalOverlay.active .filter-drawer-header,
    html body #filterModalOverlay.active .filter-drawer-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2147483647 !important;
        flex-shrink: 0 !important;
        background: #fff !important;
        pointer-events: auto !important;
    }

    body > #filterModalOverlay.active .filter-drawer-close,
    html body #filterModalOverlay.active .filter-drawer-close,
    #filterModalOverlay .filter-drawer-close,
    .filter-drawer-modal .filter-drawer-close {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 2147483647 !important;
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        font-size: 28px !important;
        line-height: 1 !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    #filterModalOverlay .filter-drawer-close i,
    .filter-drawer-modal .filter-drawer-close i {
        display: none !important;
    }
    #filterModalOverlay .filter-drawer-close:empty::before,
    .filter-drawer-modal .filter-drawer-close:not(:has(i))::before {
        content: none;
    }

    body > #filterModalOverlay.active .filter-drawer-modal,
    html body #filterModalOverlay.active .filter-drawer-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - var(--glrcf-filter-modal-top, 88px) - 16px) !important;
    }

    body > #filterModalOverlay.active #headerFilterDrawerContent,
    html body #filterModalOverlay.active #headerFilterDrawerContent {
        max-height: calc(100vh - var(--glrcf-filter-modal-top, 88px) - 150px) !important;
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Row 3 — navigator: icon on top, label below (between search row and header bottom) */
    html body #mainHeader .header-second-row,
    html body #mainHeader #headerSecondRow {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 34px !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 2px 0 30px !important;
        margin: -22px 0 0 0 !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        flex-shrink: 0 !important;
        order: 3 !important;
        box-sizing: border-box !important;
    }

    html body #mainHeader .header-second-row .header-center {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 34px !important;
        max-height: none !important;
        height: auto !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        justify-content: space-evenly !important;
        align-items: stretch !important;
        gap: 4px !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        scrollbar-width: none !important;
    }

    html body #mainHeader .header-second-row .header-center::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }

    html body #mainHeader #navigator-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: space-evenly !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }

    html body #mainHeader #navigator-container::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }

    html body #mainHeader #navigator-container .nav-item:not(.at-nav-mobile-only) {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        align-self: stretch !important;
        justify-content: stretch !important;
        contain: none !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body #mainHeader #navigator-container .aeris-academy-nav {
        flex-direction: column !important;
    }

    html body #mainHeader #navigator-container .nav-item .nav-btn::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    html body #mainHeader #navigator-container .nav-btn > i:not(.fa-caret-down) {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 10px !important;
        line-height: 1 !important;
        min-height: 10px !important;
        margin: 0 0 2px 0 !important;
        color: #111827 !important;
    }

    body .at-nav-dropdown-mobile-panel,
    body > .nav-dropdown.at-nav-dropdown-mobile-panel {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 2147483647 !important;
        min-height: 40px !important;
    }

    /* Search row: stay clear of top-bar bookmark / icon column */
    html body #mainHeader .header-row1,
    html body #mainHeader .mobile-header-row1 {
        padding-right: 34px !important;
        box-sizing: border-box !important;
    }

    html body #mainHeader .header-top-bar .header-icon-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
        border-radius: 8px !important;
        padding: 0 !important;
    }

    /* Home uses same scroll chip width as other navigator slots */
    html body #mainHeader #navigator-container .home-nav-item,
    html body #mainHeader #navigator-container .at-nav-order-home {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    html body #mainHeader #navigator-container .home-nav-item .nav-btn,
    html body #mainHeader #navigator-container .at-nav-order-home .nav-btn {
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    html body #mainHeader #navigator-container .home-nav-item .nav-btn > i,
    html body #mainHeader #navigator-container .at-nav-order-home .nav-btn > i {
        margin-right: 0 !important;
        display: block !important;
    }

    html body #mainHeader #navigator-container .home-nav-item .nav-text,
    html body #mainHeader #navigator-container .at-nav-order-home .nav-text {
        white-space: nowrap !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
    }

    /* Tools drawer links stay horizontal */
    #rightNavDrawer .at-sidebar-nav-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        white-space: nowrap !important;
        writing-mode: horizontal-tb !important;
        text-decoration: none !important;
        color: #000 !important;
        width: 100% !important;
        max-width: none !important;
        padding: 10px 14px !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
        word-break: normal !important;
        line-height: 1.3 !important;
    }

    #rightNavDrawer .at-sidebar-nav-link i {
        width: 20px !important;
        min-width: 20px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
    }

    #rightNavDrawer li a {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        white-space: nowrap !important;
        writing-mode: horizontal-tb !important;
    }

    /* Left hamburger drawer — keep Home aligned with other links */
    #leftNavDrawer a,
    #leftNavDrawer .at-left-sidebar-nav-link,
    #rightNavDrawer a,
    #rightNavDrawer .at-sidebar-nav-link,
    #rightNavDrawer li a {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        word-break: normal !important;
        line-height: 1.3 !important;
        color: #000 !important;
    }

    #leftNavDrawer a i,
    #rightNavDrawer a i,
    #rightNavDrawer .at-sidebar-nav-link i {
        width: 20px !important;
        min-width: 20px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
        color: #000 !important;
    }

    #leftNavDrawer a span,
    #rightNavDrawer a span,
    #rightNavDrawer .at-sidebar-nav-link span {
        color: #000 !important;
    }

    html body #mainHeader #navigator-container .at-nav-mobile-only {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html body #mainHeader #navigator-container::-webkit-scrollbar {
        display: none;
    }

    html body #mainHeader #navigator-container .at-nav-mobile-only {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html body #mainHeader #navigator-container .academy-caret-btn {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Nav chips: equal-width aligned row — all tabs visible */
    html body #mainHeader #navigator-container .nav-item:not(.at-nav-mobile-only) {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    html body #mainHeader #navigator-container .nav-btn,
    html body #mainHeader .header-second-row .nav-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 34px !important;
        height: auto !important;
        max-height: none !important;
        padding: 2px 0 !important;
        white-space: nowrap !important;
        text-align: center !important;
        border-radius: 6px !important;
        background: rgba(15, 23, 42, 0.06) !important;
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
    }

    html body #mainHeader .header-center .nav-btn {
        white-space: normal !important;
        background: rgba(15, 23, 42, 0.06) !important;
    }

    html body #mainHeader #navigator-container .nav-btn > i:not(.fa-caret-down),
    html body #mainHeader .header-second-row .nav-btn > i:not(.fa-caret-down) {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        min-height: 10px !important;
        font-size: 10px !important;
        margin: 0 0 2px 0 !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
        order: -1 !important;
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
    }

    html body #mainHeader #navigator-container .nav-text,
    html body #mainHeader .header-second-row .nav-text,
    html body #mainHeader #navigator-container .storefront-nav-label,
    html body #mainHeader .header-second-row .storefront-nav-label,
    html body #mainHeader #navigator-container .nav-btn > span.storefront-nav-label {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        font-size: 7px !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        margin-top: 1px !important;
        text-align: center !important;
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
    }

    /* Beat mobile-responsive.css "font-size:0 / hide span" on storefront navigator only */
    html body #mainHeader #navigator-container .nav-btn {
        font-size: 8px !important;
    }

    html body #mainHeader #navigator-container .nav-btn span {
        display: block !important;
    }

    html body #mainHeader #navigator-container .nav-btn .fa-caret-down,
    html body #mainHeader .header-second-row .nav-btn .fa-caret-down {
        display: none !important;
    }

    html body #mainHeader #SmartHamburger,
    html body #mainHeader #sidebarToggleBtn,
    html body #mainHeader .mobile-header-btn-inline {
        display: none !important;
    }

    /* Auction / Sales tap menus (desktop uses hover only) */
    html body #mainHeader #navigator-container .nav-item-dropdown {
        contain: none !important;
        position: relative !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        align-self: stretch !important;
        justify-content: stretch !important;
        overflow: visible !important;
    }

    html body #mainHeader #navigator-container .nav-item-dropdown .nav-btn {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 34px !important;
        height: 100% !important;
        touch-action: manipulation !important;
    }

    html body #mainHeader #navigator-container .nav-item:not(.at-nav-mobile-only),
    html body #mainHeader #navigator-container .nav-item-dropdown .nav-btn {
        touch-action: manipulation !important;
    }

    html body #mainHeader #navigator-container .nav-item-dropdown.at-nav-dropdown-open > .nav-btn {
        background: rgba(59, 130, 246, 0.18) !important;
        color: #1d4ed8 !important;
    }

    html body #mainHeader #navigator-container .nav-item-dropdown .nav-dropdown {
        display: none !important;
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: 50vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22) !important;
        z-index: 2147483647 !important;
        padding: 6px 0 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
    }

    html body #mainHeader #navigator-container .nav-item-dropdown.at-nav-dropdown-open > .nav-dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: calc(100vw - 16px) !important;
    }

    body > .nav-dropdown.at-nav-dropdown-mobile-panel {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: fixed !important;
        z-index: 2147483647 !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - var(--at-mobile-nav-dropdown-top, 120px) - 12px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        border-radius: 10px !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22) !important;
        padding: 6px 0 !important;
        box-sizing: border-box !important;
    }

    html body #mainHeader #navigator-container .nav-item-dropdown .nav-dropdown a {
        display: flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        color: #0f172a !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    html body #mainHeader #navigator-container .nav-item-dropdown .nav-dropdown a:active {
        background: #eff6ff !important;
    }

    html body #mainHeader #navigator-container .nav-dropdown-item-with-sub .nav-dropdown-grocery-trigger {
        display: flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        color: #0f172a !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent;
    }

    html body #mainHeader #navigator-container .nav-dropdown-item-with-sub .nav-dropdown-sub {
        display: none !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        min-width: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 0 4px !important;
        margin: 0 !important;
    }

    html body #mainHeader #navigator-container .nav-dropdown-item-with-sub.at-nav-sub-open .nav-dropdown-sub {
        display: block !important;
    }

    html body #mainHeader #navigator-container .nav-dropdown-item-with-sub.at-nav-sub-open .nav-dropdown-grocery-trigger {
        background: #f8fafc !important;
    }

    html body #mainHeader #navigator-container .nav-dropdown-sub a {
        padding-left: 28px !important;
        font-size: 12px !important;
    }

    /* Academy / Research / Health menus — fixed overlay; never expand header rows */
    html body #mainHeader #navigator-container .aeris-academy-nav .aeris-academy-dropdown {
        display: none !important;
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: auto !important;
        width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 50vh !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        transform: none !important;
        z-index: 2147483647 !important;
        box-sizing: border-box !important;
    }

    html body #mainHeader #navigator-container .aeris-academy-nav:hover .aeris-academy-dropdown {
        display: none !important;
    }

    html body #mainHeader #navigator-container .aeris-academy-nav.aeris-academy-open .aeris-academy-dropdown,
    body > .aeris-academy-dropdown.at-academy-dropdown-mobile-panel {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body > .aeris-academy-dropdown.at-academy-dropdown-mobile-panel {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 50vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        border-radius: 10px !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22) !important;
        padding: 6px 0 !important;
        z-index: 2147483647 !important;
        box-sizing: border-box !important;
    }

    html body #mainHeader .header-row1,
    html body #mainHeader .mobile-header-row1,
    html body #mainHeader .header-second-row,
    html body #mainHeader #headerSecondRow {
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    html body #mainHeader .header-top-bar .top-bar-left a,
    html body #mainHeader .header-top-bar .top-bar-right > a,
    html body #mainHeader .header-top-bar .top-bar-dropdown-wrap > a {
        padding: 3px 4px !important;
        min-width: 26px !important;
        min-height: 26px !important;
    }

    html body #mainHeader .header-top-bar a i,
    html body #mainHeader .header-top-bar .header-icon-btn i {
        font-size: 11px !important;
    }

    html body #mainHeader .header-top-bar .header-icon-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }

    /* Keep readable scroll chips on small phones — do not shrink nav labels */
}

/* Card / product photos — keep visible frame even when remote CDN image fails */
#productDetailModalContainer {
    display: none !important;
}
#productDetailModalContainer.is-open {
    display: flex !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2147483646 !important;
}
.product-click-target,
.auction-item .product-click-target,
.sale-card .product-click-target,
.vehicle-card .product-click-target {
    display: block !important;
    width: 100% !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
}
.product-click-target img,
.auction-item img:not(.flag):not(.winning-flag):not(.winning-user-photo),
.sale-card img,
.sale-item img,
.vehicle-card img,
.shop-favorite-card img,
.category-browse-card img,
.auction-card-photo {
    width: 100% !important;
    height: 135px !important;
    min-height: 120px !important;
    max-height: 220px !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #e2e8f0 !important;
    border-radius: 8px !important;
}
@media (max-width: 768px) {
    .product-click-target img,
    .auction-item img:not(.flag):not(.winning-flag):not(.winning-user-photo),
    .sale-card img,
    .sale-item img,
    .vehicle-card img,
    .shop-favorite-card img,
    .auction-card-photo {
        height: 120px !important;
        min-height: 110px !important;
    }
}

/* Desktop: wider filter modal so option labels stay on one line (all storefronts) */
@media (min-width: 993px) {
    html body #filterModalOverlay.active #dynamicFilterContent,
    body > #filterModalOverlay.active #dynamicFilterContent,
    #filterModalOverlay.active #dynamicFilterContent {
        width: min(1680px, 96vw) !important;
        max-width: min(1680px, 96vw) !important;
        margin: 0 auto !important;
    }
}

/* Filter close always readable (no Font Awesome dependency) */
.filter-drawer-close,
#filterModal .filter-modal-header button[title*="Close"],
#filterModal button[title="Close Filters"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    cursor: pointer !important;
    z-index: 2147483647 !important;
}