/* ============================================================
   Saved / favorites drawer + recently viewed. Client-side.
   ============================================================ */
.saved-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--paper); color: var(--grey); cursor: pointer; border-radius: 999px; transition: border-color .2s, color .2s; }
.saved-trigger:hover { border-color: var(--ink); color: var(--ink); }
.saved-trigger svg { width: 16px; height: 16px; }
.saved-trigger .saved-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; display: none; align-items: center; justify-content: center; background: var(--blue); color: #fff; font: 700 10px/1 var(--sans); border-radius: 999px; }
.saved-trigger.has-items .saved-count { display: inline-flex; }

.saved-backdrop { position: fixed; inset: 0; z-index: 1990; background: rgba(7,21,37,.4); opacity: 0; pointer-events: none; transition: opacity .25s; }
.saved-backdrop.is-open { opacity: 1; pointer-events: auto; }
.saved-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2001; width: min(380px, 92vw); background: var(--paper); border-left: 1px solid var(--line); box-shadow: -20px 0 60px rgba(4,16,30,.2); transform: translateX(100%); transition: transform .28s var(--ease); display: flex; flex-direction: column; }
.saved-drawer.is-open { transform: none; }
.saved-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.saved-head h2 { margin: 0; font: 600 15px/1 var(--sans); letter-spacing: -.01em; }
.saved-close { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--grey); cursor: pointer; padding: 4px; }
.saved-close:hover { color: var(--ink); }
.saved-savebtn { margin: 16px 22px 6px; padding: 13px 16px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font: 650 13px/1 var(--sans); cursor: pointer; transition: background .2s; }
.saved-savebtn:hover { background: var(--night); }
.saved-savebtn.is-saved { background: var(--paper); color: var(--ink); }
.saved-savebtn svg { width: 15px; height: 15px; }
.saved-body { flex: 1; overflow-y: auto; padding: 10px 0 24px; }
.saved-section-title { margin: 18px 22px 8px; font: 700 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.saved-item { display: flex; align-items: center; gap: 10px; padding: 11px 22px; text-decoration: none; color: var(--ink); }
.saved-item:hover { background: var(--mist); }
.saved-item-body { flex: 1; min-width: 0; }
.saved-item-title { font: 600 13.5px/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-item-remove { flex: none; border: 0; background: none; color: var(--grey); cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; }
.saved-item-remove:hover { color: var(--blue); }
.saved-empty { padding: 6px 22px 14px; color: var(--grey); font: 400 13px/1.5 var(--sans); }