Columns: 8px dot gutter | 40px thumb | text | time
-------------------------------------------------------------------------- */
.pt-nt-row{
position:relative;
display:grid;grid-template-columns:8px 40px minmax(0,1fr) auto;
column-gap:12px;align-items:start;
padding:16px 18px 16px 12px;
background:var(--pt-nt-white);border-bottom:1px solid var(--pt-nt-line);
color:var(--pt-nt-ink);text-decoration:none;
}
.pt-nt-row:hover{background:var(--pt-nt-paper)}
.pt-nt-drop .pt-nt-row{padding:14px 16px 14px 10px}
.pt-nt-drop .pt-nt-row:last-child{border-bottom:0}
/* Unread dot: its own gutter, vertically centred on the 40px thumbnail */
.pt-nt-gut{display:flex;align-items:center;height:40px}
.pt-nt-udot{width:8px;height:8px;border-radius:50%;background:var(--pt-nt-ink);flex:none}
/* Thumbnails: 40×40. The file served must be at least 80×80 for 2x screens. */
.pt-nt-thumb{
width:40px;height:40px;flex:none;overflow:hidden;display:block;
border:1px solid var(--pt-nt-line);background:var(--pt-nt-sunk);border-radius:0;
}
.pt-nt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pt-nt-thumb.is-person{border-radius:50%;border:0}
.pt-nt-thumb.is-icon{display:flex;align-items:center;justify-content:center;background:var(--pt-nt-sunk)}
.pt-nt-thumb.is-icon svg{width:18px;height:18px;display:block}
/* Grouped people: up to 3 overlapping avatars inside the same 40×40 box */
.pt-nt-stack{position:relative;width:40px;height:40px;display:block}
.pt-nt-stack img,.pt-nt-stack span{
position:absolute;width:26px;height:26px;border-radius:50%;
border:2px solid var(--pt-nt-white);object-fit:cover;background:var(--pt-nt-sunk);
}
.pt-nt-stack > :nth-child(1){left:0;top:0}
.pt-nt-stack > :nth-child(2){left:14px;top:6px}
.pt-nt-stack > :nth-child(3){left:6px;top:14px}
.pt-nt-body{min-width:0}
.pt-nt-title{margin:0;font-size:14.5px;line-height:1.4;font-weight:400;color:var(--pt-nt-soft)}
.pt-nt-title b,.pt-nt-title strong{font-weight:600;color:var(--pt-nt-ink)}
.pt-nt-row.is-unread .pt-nt-title{color:var(--pt-nt-ink)}
.pt-nt-row.is-unread .pt-nt-title b,.pt-nt-row.is-unread .pt-nt-title strong{font-weight:700}
/* The title link stretches over the whole row, so the row is one big target */
.pt-nt-hit{color:inherit;text-decoration:none}
.pt-nt-hit::after{content:"";position:absolute;inset:0;z-index:1}
.pt-nt-hit:focus-visible{outline:none}
.pt-nt-hit:focus-visible::after{outline:2px solid var(--pt-nt-accent);outline-offset:-2px}
.pt-nt-sub{
margin:2px 0 0;font-size:13.5px;line-height:1.45;color:var(--pt-nt-muted);
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.pt-nt-money,.pt-nt-ref{font-family:var(--pt-nt-mono);font-size:12.5px;color:var(--pt-nt-ink)}
.pt-nt-was{text-decoration:line-through}
.pt-nt-stars{display:inline-flex;gap:1px;vertical-align:-1px;margin-right:4px}
.pt-nt-stars svg{width:12px;height:12px;display:block} /* ink fill, never orange */
/* The inline action sits above the stretched link so it stays clickable */
.pt-nt-act{margin-top:8px;position:relative;z-index:2}
.pt-nt-btn{
display:inline-flex;align-items:center;height:32px;padding:0 12px;
border:1px solid var(--pt-nt-ink);border-radius:0;background:var(--pt-nt-white);
font:600 13px var(--pt-nt-sans);color:var(--pt-nt-ink);text-decoration:none;cursor:pointer;
}
.pt-nt-btn:hover{background:var(--pt-nt-ink);color:var(--pt-nt-paper)}
.pt-nt-time{
font:12px/1.4 var(--pt-nt-mono);color:var(--pt-nt-muted);
white-space:nowrap;text-align:right;padding-top:2px;
}
.pt-nt-row.is-unread .pt-nt-time{color:var(--pt-nt-ink)}
/* --------------------------------------------------------------------------
4. /account/notifications/ page
If the my-reviews band partial exists, reuse it. These rules are identical.
-------------------------------------------------------------------------- */
.pt-nt-page{background:var(--pt-nt-paper);color:var(--pt-nt-ink)}
.pt-nt-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.pt-nt-band{background:var(--pt-nt-graphite);color:var(--pt-nt-band-text);padding:30px 0 26px}
.pt-nt-band-rule{
display:flex;justify-content:space-between;gap:16px;
font:12.5px var(--pt-nt-mono);color:var(--pt-nt-band-dim);
border-bottom:1px solid var(--pt-nt-band-line);padding-bottom:12px;margin-bottom:22px;
}
.pt-nt-band h1{font-size:36px;line-height:1.1;font-weight:800;letter-spacing:-.03em;margin:0 0 6px;color:var(--pt-nt-band-text)}
.pt-nt-band p{margin:0;font-size:15px;line-height:1.5;color:var(--pt-nt-band-dim);max-width:640px}
.pt-nt-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0 14px}
.pt-nt-chips{display:flex;gap:6px;flex-wrap:wrap}
.pt-nt-chip{
display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;
border:1px solid var(--pt-nt-line-strong);border-radius:0;background:var(--pt-nt-white);
font:600 13.5px var(--pt-nt-sans);color:var(--pt-nt-ink);text-decoration:none;cursor:pointer;white-space:nowrap;
}
.pt-nt-chip:hover{border-color:var(--pt-nt-ink)}
.pt-nt-chip-count{font:400 12px var(--pt-nt-mono);color:var(--pt-nt-muted)}
.pt-nt-chip[aria-current="page"]{background:var(--pt-nt-ink);border-color:var(--pt-nt-ink);color:var(--pt-nt-paper)}
.pt-nt-chip[aria-current="page"] .pt-nt-chip-count{color:var(--pt-nt-bone)}
.pt-nt-tools{display:flex;gap:18px;align-items:center;font-size:13.5px}
/* Pointer to the Deals inbox. Only rendered when the count is above 0. */
.pt-nt-deals{
display:flex;justify-content:space-between;align-items:center;gap:16px;
margin:0 0 20px;padding:12px 16px;
background:var(--pt-nt-sunk);border-left:2px solid var(--pt-nt-ink);
font-size:14px;line-height:1.45;
}
.pt-nt-deals-n{font:600 14px var(--pt-nt-mono);color:var(--pt-nt-amber)}
.pt-nt-group{font-size:13px;font-weight:700;color:var(--pt-nt-muted);margin:0;padding:18px 0 8px;border-bottom:1px solid var(--pt-nt-ink)}
.pt-nt-list{border-left:1px solid var(--pt-nt-line);border-right:1px solid var(--pt-nt-line)}
.pt-nt-more{text-align:center;padding:24px 0 8px}
.pt-nt-more .pt-nt-btn{height:44px;padding:0 20px;font-size:14.5px}
.pt-nt-end{text-align:center;font-size:13px;color:var(--pt-nt-muted);margin:0;padding:6px 0 48px}
.pt-nt-empty{padding:40px 0 56px;font-size:14.5px;color:var(--pt-nt-muted)}
/* --------------------------------------------------------------------------
5. Tablet
-------------------------------------------------------------------------- */
@media (max-width:900px){
.pt-nt-drop{right:0}
}
/* --------------------------------------------------------------------------
6. Phone (≤640px)
The bell becomes a full-screen sheet under the header.
The page's chips scroll sideways and rows run edge to edge.
-------------------------------------------------------------------------- */
@media (max-width:640px){
.pt-nt-drop{
position:fixed;top:var(--pt-nt-header-h);left:0;right:0;bottom:0;
width:auto;max-width:none;border:0;border-top:1px solid var(--pt-nt-line);box-shadow:none;
display:flex;flex-direction:column;
}
.pt-nt-drop[hidden]{display:none!important}
.pt-nt-drop-close{display:inline-flex}
.pt-nt-drop-list{max-height:none;flex:1 1 auto;min-height:0}
.pt-nt-drop-foot{padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))}
.pt-nt-drop .pt-nt-row{padding:14px 16px 14px 8px;column-gap:10px}
.pt-nt-wrap{padding:0 16px}
.pt-nt-band{padding:22px 0 20px}
.pt-nt-band h1{font-size:28px}
.pt-nt-band p{font-size:14px}
.pt-nt-bar{display:block;padding:14px 0 10px}
.pt-nt-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none;min-width:0}
.pt-nt-chips::-webkit-scrollbar{display:none}
.pt-nt-chip{flex:none}
.pt-nt-tools{display:flex;justify-content:space-between;margin-top:12px}
.pt-nt-deals{flex-direction:column;align-items:flex-start;gap:6px;font-size:13.5px}
.pt-nt-group{padding-top:14px}
.pt-nt-list{border-left:0;border-right:0;margin:0 -16px}
.pt-nt-row{padding:14px 16px 14px 8px;column-gap:10px}
.pt-nt-title{font-size:14px}
.pt-nt-sub{font-size:13px}
}
/* Body lock while the phone sheet is open (JS adds the class) */
@media (max-width:640px){
body.pt-nt-sheet-open{overflow:hidden}
}
/* ==========================================================================
OVERRIDES — added on the rollout (29 Sep 2026). Everything above this line is
Plan/pt-notifications.css byte for byte; everything below documents why the
live site needs more than the mockup did. Same .pt-nt- prefix, same tokens.
========================================================================== */
/* O1. The header. The icon group is the dropdown's anchor (the file's own note in §2). Every header icon is
now 44px with a 22px glyph (header-footer-global.css, Leon 29 Sep 16:23), so nothing here resizes; the two
rules below only keep the site's old phone rule `.pt-header-icons .pt-hdr-icon` (0,2,0) from ever beating
the file's `.pt-nt-hbtn` (0,1,0). The dropdown's right edge lands under the basket icon, clear of the avatar,
as the mockup hangs it (`right:84px` there = the avatar and its gap): 50px = the avatar's 44px + the 6px gap.
The bell is a LINK to /account/notifications/ — the dropdown opens on hover (mouse only) and a click goes to
the page (Leon, 16:23). On phones there is no hover, so a tap goes straight to the page; the sheet rules in
§6 stay in the file but nothing opens them. */
.pt-header-icons{position:relative}
.pt-header-icons .pt-nt-hbtn{width:44px;height:44px}
.pt-header-icons .pt-nt-hbtn svg{width:22px;height:22px}
.pt-header-icons .pt-nt-drop{right:50px}
@media (max-width:1100px){
.pt-header-icons .pt-nt-drop{right:54px} /* 44px avatar + the 10px phone gap */
}
@media (max-width:640px){
.pt-header-icons .pt-nt-drop{right:0;z-index:9500}
}
/* Hover-open needs a bridge: the 6px gap between the bell and the panel would otherwise count as leaving both. */
.pt-header-icons .pt-nt-drop::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
/* O2. §5a — GeneratePress prints `button:hover, button:focus { background:#333; color:#fff }` inline on
every page and the child theme sets `button { color:#fff; background:#000 }`. Every