body { min-height: 100vh; background: #eef1ef; }

.notifications-page {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 18px 108px;
  background: #fbfcfb;
}

.notifications-header {
  display: grid;
  grid-template-columns: 42px 1fr 64px;
  align-items: center;
  height: 64px;
  border-bottom: 1px solid #edf0ee;
}

.notifications-header > a {
  color: #26352e;
  font-size: 32px;
  line-height: 1;
}

.notifications-header h1 {
  margin: 0;
  color: #17271f;
  font-size: 18px;
  text-align: center;
  letter-spacing: -.04em;
}

.notifications-header button {
  color: #68736d;
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.notification-guide {
  padding: 18px 2px 13px;
}

.notification-guide p { margin: 0; color: #929a96; font-size: 10px; letter-spacing: -.01em; }

.notifications-list {
  border-top: 1px solid #e5e9e7;
  background: transparent;
}

.notification-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 19px 4px 18px;
  border-bottom: 1px solid #e8ecea;
  color: #26352e;
}

.notification-card:last-child { border-bottom: 0; }

.notification-kind {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  border: 1px solid #dfe4e1;
  border-radius: 10px;
  background: #f7f9f8;
  color: #4f5c55;
  font-size: 11px;
  font-weight: 800;
}

.notification-category {
  display: block;
  margin-bottom: 6px;
  color: #89928d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
}

.notification-copy { flex: 1; min-width: 0; }
.notification-copy strong { display: block; padding-right: 18px; color: #202b26; font-size: 14px; font-weight: 720; letter-spacing: -.025em; }
.notification-copy p { margin: 7px 0; color: #6e7772; font-size: 11px; line-height: 1.55; }
.notification-copy small { display: block; margin-top: 10px; color: #a1a8a4; font-size: 9px; }

.product-preview {
  display: block;
  overflow: hidden;
  margin-top: 8px;
  padding-left: 9px;
  border-left: 2px solid #dfe5e2;
  color: #59645f;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-card > b { align-self: center; color: #b5bbb8; font-size: 17px; font-weight: 300; }

.notification-card.is-unread::after {
  position: absolute;
  top: 22px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #167052;
  content: "";
}

.notification-card.is-unread > b { visibility: hidden; }

.notification-empty { padding: 56px 20px; text-align: center; }
.notification-empty strong { color: #48564f; font-size: 13px; }
.notification-empty p { margin: 7px 0 0; color: #929b96; font-size: 10px; }