/* ──────────── ANNOUNCEMENT BAR ────────────
 * Top-of-page promo marquee. The bar is fixed at top:0 so the
 * navbar (also fixed) sits underneath it offset by --announce-h
 * (set on :root in layout.html). Marquee runs an infinite -50%
 * translateX loop on a track that contains the row markup twice
 * back-to-back, producing a seamless scroll without JS.
 *
 * Loaded globally via layout.html so every page (index, category,
 * package, checkout, options, cms-page) gets the same chrome.
 * Lives in its own file rather than in styles.css because only
 * the homepage links styles.css; the rest of the templates link
 * their own page CSS (products.css, product.css, …).
 * ───────────────────────────────────────── */
.announce-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--announce-h, 50px);
    z-index: 1200; /* above navbar (1000) */
    overflow: hidden;
    background: radial-gradient(ellipse 50% 191.34% at 50% 50%, #FA4039 0%, #942622 100%);
    box-shadow: 0 4px 20px rgba(250, 64, 57, 0.15);
}
.announce-bar__track {
    display: flex;
    width: max-content;
    height: 100%;
    animation: announce-marquee 38s linear infinite;
    will-change: transform;
}
.announce-bar:hover .announce-bar__track {
    animation-play-state: paused;
}
.announce-bar__row {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* Each row hosts the full set of items; track holds two rows
     * back-to-back so -50% transform yields a seamless wrap. */
    gap: 64px;
    padding: 0 32px;
}
.announce-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    color: #000;
    font-family: "GTA Art Deco", sans-serif;
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
}
.announce-item__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.announce-item__label-light { font-weight: 400; }
.announce-item__label-bold { font-weight: 500; }
.announce-item__sep {
    width: 14px;
    height: 2px;
    background: rgba(0, 0, 0, 0.29);
    border-radius: 22px;
    flex-shrink: 0;
}
.announce-item__pct {
    font-weight: 500;
    letter-spacing: 0.01em;
}
.announce-item__logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}
@keyframes announce-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .announce-bar__track { animation: none; }
}
@media (max-width: 760px) {
    :root { --announce-h: 42px; }
    .announce-item { font-size: 14px; gap: 6px; }
    .announce-item__logo { width: 22px; height: 22px; }
    .announce-bar__row { gap: 40px; padding: 0 20px; }
}