/* ── WHAT'S NEW — rotating announce bar + side tab (homepage) ── */
:root{--wn-purple:#7C3AED;--wn-amber:#B45309}

/* shared */
.wn-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:var(--teal-bg);color:#0C8491;border:1px solid var(--teal-bg2)}
.wn-tag.product{background:#F5F3FF;color:var(--wn-purple);border-color:#E4DBFF}
.wn-thumb{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:var(--teal-bg)}
.wn-tile{width:56px;height:56px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;text-align:center;line-height:1.1;background:linear-gradient(135deg,#044352,#05596D)}
.wn-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:var(--r-md);transition:background .18s;position:relative}
.wn-item:hover{background:var(--teal-bg)}
.wn-item .t{font-size:13px;font-weight:700;color:var(--text-1);line-height:1.3}
.wn-item .m{font-size:11px;color:var(--text-3);margin-top:3px;display:flex;gap:8px;align-items:center}
.wn-item.unseen::after{content:'';position:absolute;right:10px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#E8600A}
.wn-panel{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.wn-panel h4{font-size:15px;font-weight:800;letter-spacing:-.3px}
.wn-fixed{position:fixed;z-index:1050}

/* rotating announce bar */
#announce-bar .wn-slide{display:inline}
#announce-bar .wn-slide.fade{animation:wnfade .5s}
#announce-bar .wn-ctl{display:inline-flex;gap:6px;align-items:center;margin-left:14px;vertical-align:middle}
#announce-bar .wn-arrow{color:#fff;opacity:.6;font-size:15px;padding:0 4px;line-height:1}
#announce-bar .wn-arrow:hover{opacity:1}
#announce-bar .wn-dots{display:inline-flex;gap:5px}
#announce-bar .wn-dots button{width:6px;height:6px;padding:0;border-radius:50%;background:rgba(255,255,255,.3)}
#announce-bar .wn-dots button.on{background:var(--teal-light)}
@keyframes wnfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* side tab */
.wn-side{right:0;top:50%;transform:translateY(-50%) translateX(var(--wn-sw,340px));transition:transform .4s cubic-bezier(.22,1,.36,1);display:flex;align-items:center}
.wn-side.open{transform:translateY(-50%)}
.wn-sidetab{writing-mode:vertical-rl;transform:rotate(180deg);background:var(--teal);color:#fff;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:18px 11px;border-radius:0 var(--r-md) var(--r-md) 0;box-shadow:var(--shadow-teal);display:flex;align-items:center;gap:8px}
.wn-sidetab:hover{background:var(--teal-dark)}
.wn-sidetab .cnt{writing-mode:horizontal-tb;transform:rotate(180deg);background:#E8600A;border-radius:99px;min-width:20px;height:20px;font-size:11px;display:flex;align-items:center;justify-content:center}
.wn-sidepanel{width:340px;max-width:calc(100vw - 60px);padding:16px;border-radius:var(--r-lg) 0 0 var(--r-lg);border-right:0}

@media(prefers-reduced-motion:reduce){
  #announce-bar .wn-slide.fade{animation:none}
  .wn-side{transition:none}
}