.inmecs-todayshipping-slot {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.inmecs-todayshipping-banner {
    display: block;
    visibility: visible;
    opacity: 1;
    background: var(--ts-bg);
    color: var(--ts-color);
    padding: var(--ts-padding);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.inmecs-todayshipping-banner a {
    color: inherit;
}

.inmecs-todayshipping-countdown {
    font-weight: 700;
    white-space: nowrap;
}

/*
 * SBS/Apex Mobile bis zum Bootstrap-lg-Breakpoint.
 * Der obere Banner bleibt normal im Dokumentfluss und immer sichtbar.
 * Unter dem Footer wird Platz in exakt der Höhe der fixierten Mobile-Navigation
 * reserviert, damit der untere Banner nicht von ihr überdeckt wird.
 */
@media (max-width: 991.98px) {
    .inmecs-todayshipping-slot--top,
    .inmecs-todayshipping-slot--top .inmecs-todayshipping-banner {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .inmecs-todayshipping-slot--top {
        position: relative;
        width: 100%;
        z-index: 2;
    }

    .inmecs-todayshipping-slot--bottom {
        display: block !important;
        visibility: visible !important;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding-bottom: calc(var(--ts-mobile-nav-height, 72px) + env(safe-area-inset-bottom, 0px) + 8px);
    }

    .inmecs-todayshipping-slot--bottom .inmecs-todayshipping-banner {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative;
        z-index: 2;
    }
}

/*
 * SBS2025 Mobile: der obere Banner wird per banner.js als erstes Element
 * in <header class="header"> verschoben. Diese Regeln verhindern, dass
 * Header-/Responsive-Regeln des Themes ihn ausblenden oder überdecken.
 */
@media (max-width: 991.98px) {
    header.header > .inmecs-todayshipping-slot--top,
    header.header > .inmecs-todayshipping-slot--top.is-mobile-header-banner {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        inset: auto !important;
        z-index: 1005 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 1px !important;
        flex: 0 0 100% !important;
        transform: none !important;
        overflow: visible !important;
    }

    header.header > .inmecs-todayshipping-slot--top .inmecs-todayshipping-banner {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
    }
}