.customer-notifications { padding: 28px 0 40px; }
.notifications-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.notifications-heading h1 { font-size:28px; margin:8px 0; }
.notifications-heading p,.notifications-summary,.notifications-retention,.notification-dates { color:#687b8c; }
.customer-notifications .btn { border-radius:0; white-space:nowrap; }
.notifications-list { display:grid; gap:12px; }
.notification-item { display:flex; align-items:center; gap:18px; padding:20px; border:1px solid #dee6ec; background:#fff; }
.notification-item[data-unread-id] { border-left:3px solid #f58a00; }
.notification-item img { object-fit:contain; flex-shrink:0; background:#fafafa; }
.notification-item-content { flex:1; min-width:0; }
.notification-item h2 { font-size:18px; margin:6px 0; overflow-wrap:anywhere; }
.notification-item p { margin:0 0 10px; overflow-wrap:anywhere; }
.notification-state { color:#a45b00; font-size:12px; font-weight:600; }
.notification-dates { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:12px; }
.notifications-empty { padding:28px; background:#f7f9fb; border:1px solid #dee6ec; }
.notifications-empty h2 { font-size:20px; }
.notifications-retention { font-size:12px; margin-top:20px; }
@media(max-width:600px) { .notifications-heading { align-items:flex-start; }.notifications-heading h1 { font-size:24px; }.notification-item { flex-wrap:wrap; gap:12px; padding:16px; }.notification-item img { width:60px; height:60px; }.notification-item-content { flex-basis:calc(100% - 80px); }.notification-item .btn { width:100%; }.notification-item h2 { font-size:16px; } }