.top-announcement { position: sticky; top: 0; z-index: 170; min-height: 36px; background: var(--announcement-bg-mode, var(--brand-50, #fff4ed)); color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--mark, #ff5a00) 18%, var(--border)); }
.top-announcement-inner { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; padding: 5px 48px; box-sizing: border-box; }
.top-announcement-copy { max-width: min(70vw, 620px); overflow: hidden; color: var(--announcement-text, var(--text)); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.top-announcement-action { display: inline-flex; align-items: center; min-height: 28px; padding: 0 13px; border-radius: 999px; color: var(--announcement-button-text, #fff); background: var(--announcement-button-bg, #09090b); font-size: 12px; font-weight: 700; text-decoration: none; }
.top-announcement-close { position: absolute; top: 50%; right: 18px; width: 28px; height: 28px; border: 0; border-radius: 50%; color: var(--muted-strong); background: transparent; font-size: 22px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.top-announcement-close:hover, .top-announcement-close:focus-visible { color: #09090b !important; background: rgba(255, 90, 0, .1); outline: none; }
.top-announcement.hidden { display: none; }
@media (max-width: 600px) { .top-announcement-inner { justify-content: flex-start; gap: 6px; padding: 4px 42px 4px 14px; } .top-announcement-copy { flex: 1; max-width: none; font-size: 12px; } .top-announcement-action { flex: none; min-height: 26px; padding-inline: 10px; font-size: 11px; } .top-announcement-icon { width: 18px; font-size: 15px; } .top-announcement-close { right: 8px; } }