:root{--notif-width:360px;--notif-radius:14px;--notif-shadow:0 8px 32px #0000001f, 0 2px 8px #0000000f;--notif-border:1px solid #00000012;--notif-bg:#fff;--notif-header-bg:#fafafa;--notif-unread-bg:#eff6ff;--notif-unread-dot:#3b82f6;--notif-hover-bg:#f5f5f5;--notif-item-border:#0000000d;--notif-empty-color:#9ca3af;--notif-time-color:#9ca3af;--notif-title-color:#111827;--notif-message-color:#4b5563;--notif-anim-duration:.18s}.notif-bell-wrapper{display:inline-block;position:relative}.notif-trigger-btn{width:40px;height:40px;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.notif-trigger-btn:hover{background:#0000000f}.notif-trigger-btn .cart-count{color:#fff;text-align:center;background:#ef4444;border-radius:999px;min-width:18px;height:18px;padding:0 5px;font-size:10px;font-weight:700;line-height:18px;position:absolute;top:0;right:0}.notif-dropdown{width:var(--notif-width);background:var(--notif-bg);border:var(--notif-border);border-radius:var(--notif-radius);box-shadow:var(--notif-shadow);z-index:1000;transform-origin:100% 0;animation:notif-pop-in var(--notif-anim-duration) cubic-bezier(.34, 1.56, .64, 1) forwards;position:absolute;top:calc(100% + 10px);right:0;overflow:hidden}@keyframes notif-pop-in{0%{opacity:0;transform:scale(.9)translateY(-8px)}to{opacity:1;transform:scale(1)translateY(0)}}.notif-header{background:var(--notif-header-bg);border-bottom:var(--notif-border);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.notif-header-title{color:var(--notif-title-color);letter-spacing:-.01em;margin:0;font-size:14px;font-weight:700}.notif-unread-badge{background:var(--notif-unread-dot);color:#fff;border-radius:99px;margin-left:6px;padding:1px 7px;font-size:10px;font-weight:700}.notif-mark-all-btn{color:#6b7280;cursor:pointer;transition:background var(--notif-anim-duration), color var(--notif-anim-duration);background:0 0;border:none;border-radius:6px;align-items:center;gap:4px;padding:4px 8px;font-size:12px;font-weight:500;display:flex}.notif-mark-all-btn:hover{color:#111827;background:#f0f0f0}.notif-list{overscroll-behavior:contain;max-height:380px;overflow-y:auto}.notif-list::-webkit-scrollbar{width:4px}.notif-list::-webkit-scrollbar-track{background:0 0}.notif-list::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:4px}.notif-item{border-bottom:1px solid var(--notif-item-border);cursor:pointer;transition:background var(--notif-anim-duration);color:inherit;align-items:flex-start;gap:12px;padding:13px 18px;text-decoration:none;display:flex}.notif-item:last-child{border-bottom:none}.notif-item:hover{background:var(--notif-hover-bg)}.notif-item.is-unread{background:var(--notif-unread-bg)}.notif-item.is-unread:hover{background:#dbeafe}.notif-icon-wrap{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.notif-item-content{flex:1;min-width:0}.notif-item-header{align-items:center;gap:6px;display:flex}.notif-item-title{color:var(--notif-title-color);white-space:nowrap;text-overflow:ellipsis;margin:0 0 3px;font-size:13px;font-weight:600;overflow:hidden}.notif-unread-dot{background:var(--notif-unread-dot);border-radius:50%;flex-shrink:0;width:7px;height:7px;margin-bottom:2px}.notif-item-message{color:var(--notif-message-color);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:12px;line-height:1.5;display:-webkit-box;overflow:hidden}.notif-item-time{color:var(--notif-time-color);margin-top:5px;font-size:11px;display:block}.notif-empty{color:var(--notif-empty-color);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:40px 20px;display:flex}.notif-empty-icon{opacity:.35}.notif-empty-text{margin:0;font-size:13px;font-weight:500}.notif-footer{border-top:var(--notif-border);background:var(--notif-header-bg);justify-content:space-between;align-items:center;gap:8px;padding:10px 18px;display:flex}.notif-view-all-link{color:#111827;font-size:12px;font-weight:600;text-decoration:none}.notif-view-all-link:hover{text-decoration:underline}.notif-load-more-btn{color:#3b82f6;cursor:pointer;transition:background var(--notif-anim-duration);background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:12px;font-weight:500}.notif-load-more-btn:hover{background:#eff6ff}.notif-load-more-btn:disabled{color:#9ca3af;cursor:default;background:0 0}