/* Mitzuma desktop shopping bar. Plain CSS: no Tailwind rebuild required. */
.momo-desktop-bar {
    display: none;
}

.momo-desktop-bar [x-cloak] {
    display: none !important;
}

@media (min-width: 1280px) {
    /* Keep the clock and the header aligned when a modal locks page scrolling. */
    html {
        scrollbar-gutter: stable;
    }

    #header.momo-has-desktop-bar > .momo-primary-header-row > .momo-shared-menu {
        display: contents;
    }

    #header .momo-mobile-menu-trigger {
        display: none !important;
    }

    #header .momo-desktop-bar {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 24px;
        min-height: 48px;
        margin-inline: calc(0px - var(--momo-header-inline-padding, 12px));
        padding-left: var(--momo-header-inline-padding, 12px);
        background: #222f3e;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
    }

    .momo-desktop-bar__links {
        display: flex;
        flex: 0 1 auto;
        align-items: stretch;
        gap: 4px;
        min-width: 0;
    }

    .momo-desktop-bar__all,
    .momo-desktop-bar__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px;
        margin: 0;
        padding: 10px 14px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
    }

    .momo-desktop-bar__all {
        padding-inline: 12px 16px;
        font-weight: 700;
    }

    .momo-desktop-bar__all:hover,
    .momo-desktop-bar__all[aria-expanded="true"],
    .momo-desktop-bar__link:hover {
        background: #344458;
        color: #ffffff;
        text-decoration: none;
    }

    .momo-desktop-bar__deals {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        align-self: stretch;
        justify-content: center;
        gap: 12px;
        width: clamp(320px, 25vw, 360px);
        min-width: 320px;
        min-height: 48px;
        margin-left: auto;
        padding: 6px 22px;
        background: #25CD66;
        color: #073b22;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }

    .momo-desktop-bar__deals:hover {
        background: #20b95b;
        color: #073b22;
        text-decoration: none;
    }

    .momo-desktop-bar svg {
        flex: 0 0 auto;
    }

    .momo-desktop-bar__timer {
        display: inline-block;
        min-width: 8ch;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 20px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em;
        line-height: 1.2;
        text-align: right;
    }

    .momo-desktop-bar :is(button, a):focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: -5px;
    }

    .momo-desktop-bar .momo-desktop-bar__deals:focus-visible {
        outline-color: #073b22;
    }

    /* The measured height includes both rows, even after the header is fixed. */
    body.sticky-header {
        padding-top: var(--momo-header-height, 112px);
    }

    #header.momo-has-desktop-bar .main-menu .hove-none-overlay + div {
        top: var(--momo-primary-header-bottom, 64px);
        max-height: calc(100dvh - var(--momo-primary-header-bottom, 64px));
        overscroll-behavior: contain;
    }

    /* Match the existing treatment of primary navigation in the search overlay. */
    body.body-blur #header .momo-desktop-bar {
        visibility: hidden;
        pointer-events: none;
    }

    /* This is the existing native mobile dialog, opened to its category view. */
    #mobileMenu.tal-tk-mobile-drawer {
        position: fixed;
        inset: 0 auto 0 0;
        width: 390px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: #f3f3f4;
        color: #4c4c4c;
        box-shadow: 8px 0 22px rgb(0 0 0 / 16%);
    }

    #mobileMenu.tal-tk-mobile-drawer::backdrop {
        background: rgb(0 0 0 / 60%);
    }

    #mobileMenu .tal-tk-sub-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 56px;
        align-items: center;
        min-height: 64px;
        padding-left: 20px;
        border-bottom: 1px solid #e5e5e5;
        background: #ffffff;
    }

    #mobileMenu .tal-tk-sub-header strong {
        overflow: hidden;
        color: #222222;
        font-size: 18px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #mobileMenu.momo-desktop-category-drawer .tal-tk-back {
        display: none;
    }

    #mobileMenu .tal-tk-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: auto;
        padding: 0;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: #4c4c4c;
        box-shadow: none;
        cursor: pointer;
    }

    #mobileMenu .tal-tk-close:hover {
        background: #f0f2f6;
    }

    #mobileMenu .tal-tk-drawer-body {
        position: relative;
        height: calc(100vh - 64px);
        height: calc(100dvh - 64px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #f3f3f4;
    }

    #mobileMenu .tal-tk-subview {
        min-height: calc(100vh - 64px);
        min-height: calc(100dvh - 64px);
        background: #f3f3f4;
    }

    #mobileMenu .tal-tk-category-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 54px;
        padding: 12px 20px;
        border-bottom: 1px solid #e8e8e8;
        background: #ffffff;
        color: #4d4d4d;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.4;
        text-align: left;
        text-decoration: none;
    }

    #mobileMenu .tal-tk-category-link > span:first-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    #mobileMenu .tal-tk-category-link > .btn,
    #mobileMenu .tal-tk-category-link > svg {
        flex: 0 0 auto;
    }

    #mobileMenu .tal-tk-category-link:hover {
        background: #f7f8fb;
        color: #222222;
    }

    #mobileMenu .tal-tk-category-link[aria-current="page"] {
        color: #2146cf;
        font-weight: 700;
    }

    #mobileMenu :is(button, a):focus-visible {
        outline: 2px solid #2146cf;
        outline-offset: -3px;
    }
}

@media (min-width: 1280px) and (prefers-reduced-motion: reduce) {
    #mobileMenu,
    #mobileMenu [x-ref="subMenuPanel"] {
        transition-duration: 0s !important;
    }
}