/**
 * Header: larger screens (min-width: 769px)
 * Category chips stay in the header bar. Mobile dropdown chrome stays hidden
 * unless html.ttms-mobile-menublock (coarse pointer / touch tablet).
 */
@media (min-width: 769px) {
    :root {
        --ttms-dashboard-btn-slot: 4.5em;
    }

    html:not(.ttms-mobile-menublock) {
        --ttms-menu-side-width: 0px;
    }

    html:not(.ttms-mobile-menublock) .header-menublock-toggle,
    html:not(.ttms-mobile-menublock) .header-menublock-backdrop {
        display: none !important;
    }

    html:not(.ttms-mobile-menublock) .header-leading {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    html:not(.ttms-mobile-menublock) .header-notify-btn-wrap {
        margin-inline-start: 0;
    }

    /* backdrop-filter on .main-header makes it the containing block for
       position:fixed descendants, so the sidebar was stuck in the 5em bar
       and collapsed to 0 height. Keep the blur on the bar only. */
    html:not(.ttms-mobile-menublock) .main-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: visible;
    }

    html:not(.ttms-mobile-menublock) .main-header .container {
        background: var(--header-bg-color);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        overflow: visible;
    }

    html:not(.ttms-mobile-menublock) .header-nav {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        bottom: auto;
        width: auto;
        max-width: none;
        z-index: auto;
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        min-width: 0;
        max-height: none;
        height: auto;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        -webkit-transform: none;
        transition: none;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    html:not(.ttms-mobile-menublock) .header-nav::before,
    html:not(.ttms-mobile-menublock) .header-nav::after {
        display: block;
        content: '';
    }

    html:not(.ttms-mobile-menublock) .main-header.menublock-scrolled-right .dashboard-menu-btn-wrap {
        flex-basis: 0;
        width: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    html:not(.ttms-mobile-menublock) .main-header.menublock-scrolled-right .dashboard-menu-btn-wrap #dashboardBtn {
        transform: translate3d(-100%, 0, 0);
    }

    html:not(.ttms-mobile-menublock) .main-header.menublock-scrolled-right .header-leading .logo-container.header-logo {
        overflow: visible;
    }

    html:not(.ttms-mobile-menublock) body.ttms-logged-in .main-header.menublock-scrolled-right .account-badge--on-logo {
        display: flex !important;
        opacity: 1;
    }

    html:not(.ttms-mobile-menublock) #menublock {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        max-height: none;
        height: auto;
        min-height: 0;
        padding: 0.35rem 0.75rem 0.35rem 0.15rem;
        gap: 0.55rem;
        scroll-snap-type: none;
    }

    html:not(.ttms-mobile-menublock) #menublock::-webkit-scrollbar {
        width: auto;
        height: 4px;
    }

    html:not(.ttms-mobile-menublock) #menublock .menublock-item,
    html:not(.ttms-mobile-menublock) #menublock li {
        min-width: var(--menublock-chip-min-width);
        max-width: none;
        width: auto;
    }

    html:not(.ttms-mobile-menublock) #menublock .menublock-link {
        box-sizing: border-box;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: var(--menublock-chip-height);
        min-height: var(--menublock-chip-height);
        max-height: var(--menublock-chip-height);
        padding: 0.28rem 0.5rem 0.22rem;
        gap: 0.12rem;
        border-radius: var(--menublock-chip-radius);
        touch-action: manipulation;
        overflow: hidden;
    }

    html:not(.ttms-mobile-menublock) #menublock .menublock-link:hover,
    html:not(.ttms-mobile-menublock) #menublock .menublock-link:focus-visible,
    html:not(.ttms-mobile-menublock) #menublock .menublock-link:active {
        transform: none;
    }

    html:not(.ttms-mobile-menublock) #menublock .menublock-link__icon {
        width: 1.35rem;
        height: 1.35rem;
    }

    html:not(.ttms-mobile-menublock) #menublock .menublock-link__label,
    html:not(.ttms-mobile-menublock) #menublock span {
        font-size: 0.62rem;
        font-weight: 700;
        text-align: center;
        width: 100%;
        -webkit-line-clamp: 2;
    }

    html:not(.ttms-mobile-menublock) #dashboardBtn img {
        height: 2.75em !important;
        width: auto !important;
        max-width: 3.4em !important;
        max-height: 2.75em !important;
        object-fit: contain;
        object-position: center;
    }

    html:not(.ttms-mobile-menublock) .header-leading .logo-container.header-logo .logo,
    html:not(.ttms-mobile-menublock) .header-leading .logo-container img.logo {
        width: auto !important;
        height: auto !important;
        max-width: 3.15rem !important;
        max-height: 3.15rem !important;
        object-fit: contain;
        object-position: center;
    }

    html:not(.ttms-mobile-menublock) #main {
        box-sizing: border-box;
    }

    html:not(.ttms-mobile-menublock) #footer {
        left: 0;
        right: 0;
        width: auto;
    }

    html:not(.ttms-mobile-menublock) .menu-search-bar {
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        max-width: min(40rem, calc(100% - 1.5rem));
    }
}

/* Wide screens keep the header chip row even if a touch-emulation class is on. */
@media (min-width: 1100px) {
    html {
        --ttms-menu-side-width: 0px;
    }

    html.ttms-mobile-menublock .header-menublock-toggle,
    html.ttms-mobile-menublock .header-menublock-backdrop {
        display: none !important;
    }

    html.ttms-mobile-menublock .main-header .container {
        gap: 0.85rem;
    }

    html.ttms-mobile-menublock .main-header .header-nav {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        overflow: hidden;
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        min-width: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        z-index: auto;
    }

    html.ttms-mobile-menublock .header-nav::before {
        content: '';
        display: block;
        position: absolute;
        padding: 0;
        font-size: 0;
        letter-spacing: 0;
        text-transform: none;
        background: linear-gradient(to right, var(--header-bg-color), transparent);
    }

    html.ttms-mobile-menublock #menublock {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        height: auto;
        min-height: 0;
        padding: 0.35rem 0.75rem 0.35rem 0.15rem;
        gap: 0.55rem;
    }

    html.ttms-mobile-menublock #menublock .menublock-link {
        box-sizing: border-box;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: var(--menublock-chip-height);
        min-height: var(--menublock-chip-height);
        max-height: var(--menublock-chip-height);
        padding: 0.28rem 0.5rem 0.22rem;
        gap: 0.12rem;
        border-radius: var(--menublock-chip-radius);
        overflow: hidden;
    }

    html.ttms-mobile-menublock #menublock .menublock-link__label,
    html.ttms-mobile-menublock #menublock span {
        font-size: 0.62rem;
        font-weight: 700;
        text-align: center;
        width: 100%;
    }

    

    html.ttms-mobile-menublock #footer {
        left: 0;
        right: 0;
        width: auto;
    }
}