.z-announcement {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: var(--z-ann-pad, 11px) 32px;
    background: var(--z-ann-bg, #171717);
    color: var(--z-ann-text, #fff);
    font-family: inherit;
    font-size: var(--z-ann-size, 13px);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 18px;
    text-align: center;
}

html.z-announcement-dismissed .z-announcement {
    display: none;
}

.z-announcement-reopen-wrap {
    display: none;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 6px 32px 0;
    justify-content: flex-end;
}

html.z-announcement-dismissed .z-announcement-reopen-wrap {
    display: flex;
}

.z-announcement-reopen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--z-ann-bg, #171717);
    color: var(--z-ann-text, #fff);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.z-announcement-reopen:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.z-announcement-viewport {
    width: 100%;
    max-width: 1280px;
}

.z-announcement.is-rotating .z-announcement-viewport {
    display: grid;
}

.z-announcement-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.z-announcement.is-rotating .z-announcement-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--z-ann-duration, 400ms) ease;
}

.z-announcement.is-rotating .z-announcement-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.z-announcement-copy,
.z-announcement-slide a,
.z-announcement-desktop,
.z-announcement-mobile {
    min-width: 0;
    overflow-wrap: anywhere;
}

.z-announcement a {
    color: var(--z-ann-link, #fff);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.z-announcement a:hover,
.z-announcement a:focus-visible {
    color: var(--z-ann-link, #fff);
}

.z-announcement-mobile {
    display: none;
}

.z-announcement-nav,
.z-announcement-dismiss {
    position: absolute;
    top: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.z-announcement-prev {
    left: 0;
}

.z-announcement-next {
    right: 0;
}

.z-announcement.has-dismiss .z-announcement-next {
    right: 32px;
}

.z-announcement-dismiss {
    right: 0;
    width: 36px;
    font-size: 20px;
}

.z-announcement.has-nav {
    padding-left: 40px;
    padding-right: 40px;
}

.z-announcement.has-dismiss {
    padding-right: 44px;
}

.z-announcement.has-nav.has-dismiss {
    padding-right: 72px;
}

.z-announcement-nav:focus-visible,
.z-announcement-dismiss:focus-visible,
.z-announcement a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

@media (max-width: 767px) {
    .z-announcement {
        min-height: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

    .z-announcement-reopen-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }

    .z-announcement.has-nav {
        padding-left: 36px;
        padding-right: 36px;
    }

    .z-announcement.has-dismiss {
        padding-right: 40px;
    }

    .z-announcement.has-nav.has-dismiss {
        padding-right: 68px;
    }

    .z-announcement-slide {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .z-announcement-slide:has(.z-announcement-mobile) .z-announcement-desktop {
        display: none;
    }

    .z-announcement-mobile {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .z-announcement.is-rotating .z-announcement-slide {
        transition: none;
    }
}
