/*
 * Control theme / compact mobile header — v4.3.0
 * Written for the supplied Control 2.28.0 header.tpl and navbar-user.tpl.
 * Layout only. Existing IDs, buttons, menu handlers and permissions are unchanged.
 * Loaded from Control's includes/head.tpl on cart AND other client-area pages.
 * Above 767px the theme's original desktop header is left untouched.
 */
@media screen and (max-width: 767px) {
    /* Replace the original 160px, two-row mobile header with one 68px row. */
    body #container > header#header {
        display: grid;
        grid-template-columns: minmax(44px, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
        grid-template-rows: 44px;
        align-items: center;
        column-gap: 8px;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 68px;
        min-height: 68px;
        margin: 0;
        padding: 12px;
        overflow: visible;
        transition: none;
    }

    /* The existing brand element sits between the left and right controls. */
    body #container > header#header > .brand {
        grid-column: 2;
        grid-row: 1;
        float: none;
        position: static;
        min-width: 0;
        width: 100%;
        height: 44px;
        margin: 0;
        padding: 0;
        background: transparent;
        overflow: visible;
    }
    body #container > header#header > .brand > a.logo {
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        float: none;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        height: 44px;
        min-height: 0;
        margin: 0;
        padding: 0;
        line-height: 1.2;
        text-align: center;
        overflow: hidden;
        transform: none;
    }
    body #container > header#header > .brand > a.logo img {
        display: block;
        flex: 0 1 auto;
        min-width: 0;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 42px;
        object-fit: contain;
        margin: 0;
        padding: 0;
    }
    body #container > header#header > .brand > a.logotext {
        font-size: clamp(14px, 4vw, 20px);
        overflow-wrap: anywhere;
    }

    body #container > header#header > .toggle-navigation.toggle-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        grid-column: 1;
        grid-row: 1;
        position: static;
        float: none;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        transform: none;
    }

    body #container > header#header > .user-nav {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        position: static;
        float: none;
        width: auto;
        max-width: none;
        height: 44px;
        margin: 0;
        padding: 0;
        transform: none;
    }
    body #container > header#header > .user-nav > ul {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 2px;
        position: static;
        height: 44px;
        width: auto;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* One grid cell layers each badge over its button without moving the HTML.
       Static positioning anchors dropdown panels to the HEADER, not to an icon. */
    body #container > header#header > .user-nav > ul > li {
        display: grid;
        grid-template-columns: 44px;
        grid-template-rows: 44px;
        align-items: center;
        justify-items: center;
        position: static;
        float: none;
        flex: 0 0 44px;
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        line-height: 1;
    }
    /* Preserve the theme's desktop/mobile visibility options. */
    body #container > header#header > .user-nav > ul > li.visible-xs-inline-block {
        display: grid !important;
    }
    body #container > header#header > .user-nav > ul > li.hidden-xs {
        display: none !important;
    }
    body #container > header#header > .toggle-navigation > button,
    body #container > header#header > .user-nav > ul > li > button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        grid-column: 1;
        grid-row: 1;
        box-sizing: border-box;
        position: relative;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border-radius: 8px;
        line-height: 1;
        transform: none;
    }
    body #container > header#header > .toggle-navigation > button > i,
    body #container > header#header > .user-nav > ul > li > button > i {
        font-size: 17px;
        line-height: 1;
    }
    body #container > header#header > .user-nav > ul > li > .badge {
        position: relative;
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        z-index: 1;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        box-sizing: border-box;
        width: auto;
        min-width: 17px;
        max-width: 42px;
        height: 17px;
        margin: -1px 0 0;
        padding: 0 4px;
        font-size: 10px;
        line-height: 17px;
        text-align: center;
        border-radius: 20px;
        white-space: nowrap;
        pointer-events: none;
    }

    /* Dropdowns remain ordinary Bootstrap menus. Only their geometry changes. */
    body #container > header#header > .user-nav > ul > li > ul.dropdown-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 12px;
        bottom: auto;
        left: auto;
        box-sizing: border-box;
        width: 300px;
        min-width: 0;
        max-width: calc(100vw - 24px);
        max-height: 65vh;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 8px;
        animation: none;
        transform: none;
    }
    body #container > header#header > .user-nav > ul > li > ul.dropdown-menu::before,
    body #container > header#header > .user-nav > ul > li > ul.dropdown-menu::after {
        display: none;
    }
    body #container > header#header > .user-nav > ul > li > ul.dropdown-menu > li > a {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.5;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    body #container > header#header .brand > a:focus-visible,
    body #container > header#header .toggle-navigation > button:focus-visible,
    body #container > header#header .user-nav > ul > li > button:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
    html[dir='rtl'] body #container > header#header > .user-nav > ul > li > ul.dropdown-menu {
        right: auto;
        left: 12px;
    }
}