.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
}

body.mevisto-banner-visible .sticky-nav {
    top: var(--mevisto-urgency-height, 0px);
}

body.mevisto-banner-visible {
    --mevisto-urgency-height: 60.8px; /* samma som barens min-height */
    padding-top: var(--mevisto-urgency-height);
}
.mc-top.is-fixed { z-index: 2147483000; pointer-events: auto; }

.urgencyTop.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
}

.seconds, .days, .hours, .minutes {
    width: 60px;
    float: left;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    text-align: center;
}

.dateLine {
    float: left;
    background-color: #fff;
    width: 0.1px;
    height: 30px;
    margin-top: 14px;
}

.bigDigits {
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
}

.smallDigits {
    color: #fff;
    font-size: 0.7rem;
    font-weight: 400;
}

.urgencyText {
    color: #fff;
    font-weight: 900;
    margin-top: 0.7rem;
    float: left;
    margin-right: 1rem;
    font-size: 1rem;
}

    .urgencyText img {
        height: 60px;
        float: left;
        margin-top: 3px;
        padding-left: 4px;
    }

    .urgencyText h2 {
        font-size: 1.9rem;
        margin-top: 0.5rem;
    }

    .urgencyText p {
        font-size: 1.2rem;
        font-weight: 600;
    }

.urgencyCountdown {
    float: left;
}

.urgencyButton {
    float: right;
}

    .urgencyButton a {
        padding: 0.2rem 1rem;
        border: 3px solid transparent;
        margin: 0.9rem 0rem 0 3rem;
        color: #fff;
        float: left;
        border-radius: 4px;
        font-size: 1rem;
        transition: background-color 1s ease,color 1s ease;
        background: #db2c05;
        color: #fff;
    }

        .urgencyButton a:hover {
            color: #db2c05;
            background: #fff;
        }

.urgencyTextSpan {
    padding-top: 8px;
    float: left;
}

.urgencyTop {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    background: linear-gradient(265deg, #008000 0%, #ff0000 100%);
}

#mevisto-countdown-bar {
    color: var(--mc-text-color, inherit);
    --cta-bg: #db2c05;
    --cta-fg: #ffffff;
    min-height: 60.8px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
}

    #mevisto-countdown-bar .mc-close {
        position: absolute;
        top: 0px;
        right: 0px;
        appearance: none;
        border: 0;
        background: transparent;
        margin-left: 1.5rem;
        color: inherit;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
    }

        #mevisto-countdown-bar .mc-close:focus {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }

    #mevisto-countdown-bar .mc-cta-compact {
        background: var(--mc-cta-bg, transparent);
        color: var(--mc-cta-fg, #fff);
        display: none;
        border: 2px solid var(--mc-cta-border, currentColor);
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    }

        #mevisto-countdown-bar .mc-cta-compact:hover {
            background: var(--mc-cta-bg-hover, var(--mc-cta-fg));
            color: var(--mc-cta-fg-hover, var(--mc-cta-bg));
            border-color: var(--mc-cta-border-hover, currentColor);
        }

    #mevisto-countdown-bar .mc-cta-desktop {
        display: inline-flex;
    }

    #mevisto-countdown-bar .dateLine {
        background: currentColor;
    }

    #mevisto-countdown-bar .urgencyButton a {
        background: var(--mc-cta-bg, #db2c05);
        color: var(--mc-cta-fg, #fff);
        border: 2px solid var(--mc-cta-border, transparent);
        padding: .3rem 1.3rem;
        border-radius: 4px;
        display: inline-block;
        font-weight: 700;
        text-decoration: none;
        transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .2s ease;
    }

        #mevisto-countdown-bar .urgencyButton a.mc-cta {
            background: var(--mc-cta-bg) !important;
            color: var(--mc-cta-fg) !important;
            border: 2px solid var(--mc-cta-bg) !important;
            padding: .3rem 1.3rem;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            text-decoration: none;
            transition: background-color .2s ease, color .2s ease, border-color .2s ease;
        }

            #mevisto-countdown-bar .urgencyButton a.mc-cta:hover,
            #mevisto-countdown-bar .urgencyButton a.mc-cta:focus {
                background: var(--mc-cta-fg) !important;
                color: var(--mc-cta-bg) !important;
                border-color: var(--mc-cta-fg) !important;
            }

    #mevisto-countdown-bar .urgencyText, #mevisto-countdown-bar .urgencyTextSpan, #mevisto-countdown-bar .bigDigits, #mevisto-countdown-bar .smallDigits {
        color: inherit;
    }

.urgencyTop.mc-top.grad-sunset {
    background: linear-gradient(135deg,#ff7e5f 0%,#feb47b 100%) !important;
}

.urgencyTop.mc-top.grad-ocean {
    background: linear-gradient(135deg,#2193b0 0%,#6dd5ed 100%) !important;
}

.urgencyTop.mc-top.grad-violet {
    background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%);
}

.urgencyTop.mc-top.grad-steel {
    background: linear-gradient(135deg, #434343 0%, #000000 100%);
}

.urgencyTop.mc-top.grad-green-red {
    background: linear-gradient(265deg, #008000 0%, #ff0000 100%);
}

.urgencyTop.mc-top.grad-black-friday {
    background: linear-gradient(135deg, #000000 0%, #434343 50%, #ff0000 100%);
}

.urgencyTop.mc-top.grad-christmas {
    background: linear-gradient(135deg, #006400 0%, #ff0000 50%, #ffd700 100%);
}

.urgencyTop.mc-top.grad-easter {
    background: linear-gradient(135deg, #ffb347 0%, #ffccff 50%, #ffff99 100%);
}

.urgencyTop.mc-top.grad-midsummer {
    background: linear-gradient(135deg, #87ceeb 0%, #ffffff 50%, #228b22 100%);
}

.urgencyTop.mc-top.grad-winter-sale {
    background: linear-gradient(135deg, #ff512f 0%, #dd2476 100%);
}

.urgencyTop.mc-top.grad-silverblue {
    background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
}

.urgencyTop.mc-top.grad-midnight {
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
}

.urgencyTop.mc-top.grad-corporate {
    background: linear-gradient(135deg, #2980b9 0%, #6dd5fa 50%, #ffffff 100%);
}

.urgencyTop.mc-top.grad-tech {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.urgencyTop.mc-top.grad-sand {
    background: linear-gradient(135deg, #e6dada 0%, #274046 100%);
}

.urgencyTop.mc-top.grad-sunrise {
    background: linear-gradient(135deg, #ff512f 0%, #f09819 100%);
}

.urgencyTop.mc-top.grad-tropical {
    background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
}

.urgencyTop.mc-top.grad-pastel {
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}

.urgencyTop.mc-top.grad-rainbow {
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
}

.mc-text-mobile {
    display: none;
}

@media (max-width: 991px) {
    .urgencyButton {
        margin-right: 3rem;
    }
}

@media screen and (max-width: 840px) {
    .urgencyTextSpan span {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .mc-text-desktop {
        display: none;
    }

    .mc-text-mobile {
        display: inline;
    }

    .urgencyText img {
        height: 40px;
        margin-top: 5px;
    }

    .urgencyTextSpan {
        font-size: 0.9rem;
    }

    .bigDigits {
        font-size: 0.9rem;
    }

    .seconds, .days, .hours, .minutes {
        width: 50px;
    }

    .urgencyButton a {
        padding: 0.2rem 0.8rem;
        margin-top: 0.74rem;
    }

    #mevisto-countdown-bar.has-compact-cta .mc-cta-desktop {
        display: none !important;
    }

    #mevisto-countdown-bar.has-compact-cta .mc-cta-compact {
        display: inline-flex !important;
        width: 2rem;
        height: 2rem;
        margin: .75rem 0 0 .75rem;
    }
}

@media screen and (max-width: 640px) {
    .urgencyButton {
        padding-bottom: 1rem;
        margin-left: 0;
    }

        .urgencyButton a {
            margin-left: 0;
        }

    .urgencyButton {
        margin-right: 0rem;
    }
}

@media (max-width: 575.98px) {
    #mevisto-countdown-bar .text-desktop {
        display: none;
    }

    #mevisto-countdown-bar .text-mobile {
        display: inline;
    }

        #mevisto-countdown-bar .text-mobile.clampable {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    #mevisto-countdown-bar:hover .text-mobile.clampable,
    #mevisto-countdown-bar:focus-within .text-mobile.clampable {
        -webkit-line-clamp: 2;
    }

    .urgencyText {
        margin-right: 0;
    }
}

@media(max-width:480px) {
    .urgencyTextSpan {
        font-size: 0.8rem;
    }

    .seconds, .days, .hours, .minutes {
        width: 40px;
    }

    .bigDigits {
        font-size: 0.8rem;
    }

    .smallDigits {
        font-size: 0.65rem;
    }

    #mevisto-countdown-bar .urgencyButton a.mc-cta {
        padding: 0.5rem;
    }
}

@media (max-width: 410px) {
    #mevisto-countdown-bar .urgencyButton a.mc-cta {
        margin: 0;
    }

    #mevisto-countdown-bar {
      /*  min-height: auto;*/
    }

        #mevisto-countdown-bar .mc-close {
            font-size: 1rem;
        }

    .days {
        margin-left: 0;
        padding-left: 0;
        margin-right: 0;
        padding-right: 0;
    }

    .smallDigits {
        font-size: 0.6rem;
    }

    #mevisto-countdown-bar .urgencyButton a.mc-cta {
        padding: 0.5rem;
        margin-left: 0;
        font-size: 12px;
        height: 1.5rem;
        width: 1.5rem;
        margin-top: 0.8rem;
    }
}

@media (min-width: 767.99px) {
    .mc-cta-compact {
        display: none !important;
    }
}