/* ==========================================================================
   Announcement Bar — Safari paint safe + header-like sticky reveal
   Replace the entire announcement-bar.css with this
   ========================================================================== */

/* --- Config --- */
#shopline-section-sections--header-group__announcement-bar {
    --announcement-bar-height: 44px;
    --announcement-bar-top: env(safe-area-inset-top, 0px);

    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text));
    z-index: var(--z-index-sticky, 60);
    overflow: visible;

    /* helps Safari stacking/paint */
    isolation: isolate;
}

/* IMPORTANT:
   Do NOT make the bar sticky by default.
   It should scroll away, then reappear when JS adds `.announcement-bar__sticky`.
*/
.announcement-bar__mode-always,
.announcement-bar__mode-desktop,
.announcement-bar__mode-mobile {
    position: relative;
    top: auto;
}

/* --------------------------------------------------------------------------
   Sticky reveal behavior (driven by JS toggling `.announcement-bar__sticky`)
   We FIX the *inner wrapper element* (theme-announcement-bar-sticky) so the
   section still reserves height and you don’t get layout jumps.
--------------------------------------------------------------------------- */

/* Reserve space while the inner wrapper is fixed */
#shopline-section-sections--header-group__announcement-bar.announcement-bar__sticky {
    min-height: var(--announcement-bar-height);
}

/* Slide-down animation (top-based to avoid Safari transform weirdness) */
@keyframes announcementBarDrop {
    from {
        top: calc(var(--announcement-bar-top) - var(--announcement-bar-height));
    }

    to {
        top: var(--announcement-bar-top);
    }
}

/* ALWAYS mode: enable sticky reveal on all breakpoints */
#shopline-section-sections--header-group__announcement-bar.announcement-bar__sticky.announcement-bar__mode-always theme-announcement-bar-sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--announcement-bar-top);
    z-index: var(--z-index-sticky, 60);

    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text));

    animation: announcementBarDrop 220ms ease-out both;

    /* paint stability */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* DESKTOP mode: only sticky reveal >= 960px */
@media (min-width: 960px) {
    #shopline-section-sections--header-group__announcement-bar.announcement-bar__sticky.announcement-bar__mode-desktop theme-announcement-bar-sticky {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--announcement-bar-top);
        z-index: var(--z-index-sticky, 60);

        background-color: rgb(var(--color-background));
        color: rgb(var(--color-text));

        animation: announcementBarDrop 220ms ease-out both;

        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}

/* MOBILE mode: only sticky reveal <= 959px */
@media (max-width: 959px) {
    #shopline-section-sections--header-group__announcement-bar.announcement-bar__sticky.announcement-bar__mode-mobile theme-announcement-bar-sticky {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--announcement-bar-top);
        z-index: var(--z-index-sticky, 60);

        background-color: rgb(var(--color-background));
        color: rgb(var(--color-text));

        animation: announcementBarDrop 220ms ease-out both;

        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}

/* --------------------------------------------------------------------------
   Carousel (Safari paint-safe)
--------------------------------------------------------------------------- */

theme-announcement-bar-carousel {
    display: block;
    width: 100%;
}

theme-announcement-bar-carousel.announcement-bar__carousel-vertical {
    position: relative;
    overflow: hidden;
    /* crop the track */
    height: var(--announcement-bar-height);
}

/* Don’t use the fake wrapper for height in Safari */
theme-announcement-bar-carousel .announcement-bar__carousel-vertical-fake {
    display: none !important;
}

/* Keep the real carousel IN FLOW (not absolute) to prevent Safari dropouts */
theme-announcement-bar-carousel.announcement-bar__carousel-vertical>theme-carousel {
    position: relative !important;
    inset: auto !important;

    display: block;
    width: 100%;
    height: var(--announcement-bar-height);

    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

theme-announcement-bar-carousel .announcement-bar__carousel-wrapper {
    height: var(--announcement-bar-height);
}

/* --- Track / groups --- */
.announcement-bar__group {
    display: flex;
}

.announcement-bar__group-horizontal>.announcement-bar__group-item {
    flex: 0 0 100%;
}

.announcement-bar__group-vertical {
    height: var(--announcement-bar-height);
}

.announcement-bar__group-vertical>.announcement-bar__group-item {
    height: var(--announcement-bar-height);
}

/* --- Item styles --- */
.announcement-bar__group-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    height: var(--announcement-bar-height);
    padding-inline: 44px;
    text-align: center;

    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text));

    word-break: normal;
    overflow-wrap: anywhere;
}

.announcement-bar__group-item-inner {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-family: "Brother", sans-serif;
}

.announcement-bar__group-item-inner .rte {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
}

@media (max-width: 959px) {
    .announcement-bar__group-item-inner .rte {
        font-size: 12px;
    }
}

/* Link overlay */
.announcement-bar__group-item-link,
.announcement-bar__group-item-link:empty {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* Buttons (if enabled) */
.announcement-bar__button-wrapper {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
}

.announcement-bar__button {
    pointer-events: auto;
    position: absolute;
    inset-block-start: 50%;
    z-index: var(--z-index-hover, 2);
    color: rgb(var(--color-text));
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    transform: translateY(-50%);
}

.announcement-bar__button[name="previous"] {
    inset-inline-start: 20px;
    transform: translateY(-50%) rotate(90deg);
}

.announcement-bar__button[name="next"] {
    inset-inline-end: 20px;
    transform: translateY(-50%) rotate(-90deg);
}

@media (max-width: 959px) {
    .announcement-bar__button[name="previous"] {
        inset-inline-start: 10px;
    }

    .announcement-bar__button[name="next"] {
        inset-inline-end: 10px;
    }
}

/* Kill divider line / seam */
.announcement-bar__group-item-divide-line::after {
    display: none !important;
}