/* WebPies — sales popup + announcement bar. Compiled from scss/components-promo.scss. */

/* ===== social-proof sales toast (bottom-left) ===== */
.nx-sale{
  position: fixed; left: 18px; bottom: 18px; z-index: 70; width: min(320px, calc(100vw - 36px));
  display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px;
  background: var(--cream); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 50px -22px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(20px) scale(.96);
  transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility .45s;
}
.nx-sale.show{ opacity: 1; visibility: visible; transform: none; }
.nx-sale-img{ width: 46px; height: 46px; border-radius: 10px; background: var(--cream-2) center/cover no-repeat; flex: 0 0 auto; }
.nx-sale-body{ min-width: 0; flex: 1; }
.nx-sale-top{ font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nx-sale-title{ font-family: 'Instrument Serif', serif; font-size: 18px; line-height: 1.1; margin: 2px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-sale-meta{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); }
.nx-sale-x{ position: absolute; top: 8px; right: 10px; background: 0; border: 0; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 2px; }
.nx-sale-x:hover{ color: var(--ink); }
@media (max-width: 640px){ .nx-sale{ left: 12px; bottom: 12px; } }

/* ===== announcement / flash-sale bar (top) ===== */
#anbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 70; min-height: 40px;
  background: var(--lime); color: #0d0f12; overflow: hidden;
}
.anbar-inner{ max-width: 1360px; margin: 0 auto; min-height: 40px; padding: 7px 44px 7px 16px; display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; }
.anbar-slider{ height: 26px; overflow: hidden; width: 100%; max-width: 900px; }
.anbar-track{ display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.anbar-item{ height: 26px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #0d0f12; text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; line-height: 26px; letter-spacing: .04em; white-space: nowrap; }
.anbar-item .anbar-text{ overflow: hidden; text-overflow: ellipsis; }
.anbar-item .anbar-time{ font-variant-numeric: tabular-nums; line-height: 1; padding: 3px 8px; border-radius: 999px; background: rgba(13,15,18,.14); flex: 0 0 auto; }
.anbar-item .anbar-time b{ font-weight: 700; }
.anbar-item b{ font-weight: 700; }
.anbar-item .anbar-text{ overflow: hidden; text-overflow: ellipsis; }
.anbar-msg{ display: inline-flex; align-items: center; gap: 10px; color: #0d0f12; text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.anbar-text{ overflow: hidden; text-overflow: ellipsis; }
.anbar-msg b{ font-weight: 700; }
.anbar-dot{ width: 7px; height: 7px; border-radius: 999px; background: #0d0f12; flex: 0 0 auto; animation: anbarPulse 1.6s ease-in-out infinite; }
@keyframes anbarPulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }
.anbar-time{ font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; background: rgba(13,15,18,.14); flex: 0 0 auto; }
.anbar-time b{ font-weight: 700; }
.anbar-x{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: 0; border: 0; color: #0d0f12; font-size: 19px; line-height: 1; cursor: pointer; padding: 4px; opacity: .7; }
.anbar-x:hover{ opacity: 1; }
@media (max-width: 640px){ .anbar-slider{ height: 54px; } .anbar-item{ height: 54px; flex-direction: column; flex-wrap: nowrap; gap: 4px; white-space: normal; text-align: center; font-size: 10.5px; line-height: 1.2; } .anbar-item .anbar-text{ max-width: 100%; white-space: normal; } .anbar-inner{ padding: 7px 32px; } }

/* shift the fixed header + content down by the bar's real height (--anbar-h) */
html.has-anbar #nav{ top: var(--anbar-h, 40px); }
html.has-anbar body{ padding-top: var(--anbar-h, 40px); }