/**
 * Lovingit mobile header (2.1.6).
 * Promo widgets are outside #masthead, so the promo scrolls away while only
 * the 70px navigation bar stays in view. No fixed-position layout jumps.
 */
@media (max-width: 979px) {
    body .site-header,
    body .site-header.sticky {
        position: -webkit-sticky;
        position: sticky;
        top: var(--nx-mobile-adminbar-offset, 0px);
        z-index: 900;
        background: #fff;
        box-shadow: 0 1px 8px rgb(30 50 50 / 7%);
        min-height: 70px;
        margin: 0;
        transition: none !important;
        transform: none !important;
    }

    /* Override the theme's former fixed-bar mode in both scroll states. */
    body .site-header .top-container,
    body .site-header.sticky .top-container {
        position: relative !important;
        inset: auto !important;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 100%;
        height: 70px;
        min-height: 70px;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
        background: #fff;
        box-shadow: none !important;
        transition: none !important;
        transform: none !important;
    }

    body .site-header .top-navs,
    body .site-header.sticky .top-navs {
        min-height: 70px;
        height: 70px;
        align-items: center;
    }

    /* True geometric centering: the old translateX(-50px) was not centered. */
    body .site-header .site-branding,
    body .site-header.sticky .site-branding {
        position: absolute;
        top: 0;
        left: 50%;
        right: auto;
        height: 70px;
        max-width: min(34vw, 152px);
        margin: 0;
        padding: 0;
        transform: translateX(-50%) !important;
        transition: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    body .site-header .site-branding .custom-logo-link,
    body .site-header.sticky .site-branding .custom-logo-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-height: 70px;
        max-width: 100%;
    }
    /* Same box in both states. Padding had enlarged the logo on scroll. */
    body .site-header .site-branding img,
    body .site-header:not(.sticky) .site-branding img,
    body .site-header.sticky .site-branding img {
        display: block;
        width: auto !important;
        height: auto !important;
        max-height: 44px !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        transition: none !important;
        object-fit: contain;
    }
}