/* cms2 announcement bar */
.cms2-announce { overflow: hidden; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cms2-announce p {
    margin: 0;
    padding: 10px 40px;
    font-size: 12px;
    line-height: 1.2;
}
/* `nowrap` belongs to the MARQUEE, not to the bar.
 *
 * A scrolling track has to be a single line or the animation has nothing to
 * translate. It was set on every p, so a STATIC bar could not wrap either — it
 * ran off the end and was cut by the overflow:hidden above. Measured on site 2's
 * free-shipping bar at 375px: the sentence needs 653px against a 375px bar, so
 * 278px of it was invisible, and it stayed cut on anything narrower than 653.
 *
 * A static bar wrapping to two lines on a phone is the whole point of it being
 * static. */
.cms2-announce-scroll p { white-space: nowrap; }
.cms2-announce a { color: inherit; text-decoration: none; }
.cms2-announce-static { text-align: center; }

/* The track reads as a STATIC bar unless something asks it to scroll.
 *
 * That inversion is what lets one piece of markup serve both widths: the
 * duplicate copy the marquee translates into is always emitted, and here it is
 * simply hidden. Without it a mobile-only marquee would need its own markup
 * branch, and the two branches would drift. */
.cms2-announce-track { display: block; text-align: center; }
.cms2-announce-track p + p { display: none; }

/* …and these three declarations are what scrolling IS. They appear twice, once
   unconditionally and once inside the phone breakpoint, because a media query
   cannot be attached to a selector from outside it. Change one, change both. */
.cms2-announce-scroll .cms2-announce-track {
    display: flex; width: max-content; text-align: left;
    animation: cms2-announce-marquee 22s linear infinite;
}
.cms2-announce-scroll .cms2-announce-track p { white-space: nowrap; }
.cms2-announce-scroll .cms2-announce-track p + p { display: block; }

@media (max-width: 760px) {
    .cms2-announce-scroll-m .cms2-announce-track {
        display: flex; width: max-content; text-align: left;
        animation: cms2-announce-marquee 22s linear infinite;
    }
    .cms2-announce-scroll-m .cms2-announce-track p { white-space: nowrap; }
    .cms2-announce-scroll-m .cms2-announce-track p + p { display: block; }
}

@keyframes cms2-announce-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* A marquee is motion nobody asked for. Under prefers-reduced-motion it becomes
   the static bar instead of a frozen one: stopping the animation while keeping
   `nowrap` would leave the sentence cut off mid-word, which is the defect this
   module was just fixed for. */
@media (prefers-reduced-motion: reduce) {
    .cms2-announce .cms2-announce-track {
        display: block; width: auto; text-align: center; animation: none;
    }
    .cms2-announce .cms2-announce-track p { white-space: normal; }
    .cms2-announce .cms2-announce-track p + p { display: none; }
}

/* 40px each side is a third of a 320px screen, and a wrapped line should not be
   squeezed into the middle of the bar to pay for it. */
@media (max-width: 560px) {
    .cms2-announce p { padding: 9px 16px; }
}