/* The logo must not absorb all the shrinkage from longer account labels.
 * Scope to the native masthead; desktop and drawer controls stay native.
 */
@media (max-width: 767px) {
    .middle-header > .is-layout-flex > .is-layout-flex:has(> .wp-block-site-logo) {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .middle-header .is-layout-flex > .wp-block-site-logo {
        flex: 0 0 108px !important;
        min-width: 108px;
    }

    .middle-header .wp-block-site-logo .custom-logo-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .middle-header .wp-block-site-logo img {
        width: 108px !important;
        max-width: 100%;
        height: auto;
    }

    .middle-header .is-layout-flex > :is(.discats-header-bag, .wp-block-woocommerce-customer-account) {
        flex: 0 0 auto !important;
    }

    .middle-header .wc-block-customer-account__link {
        position: relative;
        box-sizing: border-box;
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    /* Visually hide, rather than remove, the label: it remains the link's
     * accessible name for both Login and My Account without JavaScript.
     */
    .middle-header .wc-block-customer-account__link .label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        border: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
    }
}