body.saved-drawer-open { overflow: hidden; }
.header-actions { position: relative; }
.profile-trigger { cursor: pointer; }
.profile-menu { background: #fff; border: 1px solid #dddfda; box-shadow: 0 18px 50px rgba(20,39,31,.14); opacity: 0; padding: 8px; pointer-events: none; position: absolute; right: 0; top: calc(100% + 12px); transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease; visibility: hidden; width: 250px; z-index: 160; }
.profile-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
.profile-menu-user { align-items: center; border-bottom: 1px solid #e6e7e2; display: flex; gap: 11px; padding: 10px; }
.profile-menu-user > span { align-items: center; background: #ddcdb9; border-radius: 50%; display: flex; font-size: 11px; font-weight: 600; height: 38px; justify-content: center; width: 38px; }
.profile-menu-user div, .profile-menu a > span { display: grid; gap: 3px; }
.profile-menu strong { color: #18241f; font-size: 12px; }
.profile-menu small { color: #738078; font-size: 10px; }
.profile-menu a { align-items: center; display: grid; gap: 10px; grid-template-columns: 20px 1fr 14px; margin-top: 6px; padding: 11px 10px; transition: background 150ms ease, transform 150ms ease; }
.profile-menu a:hover { background: #f1f3ef; transform: translateX(2px); }
.profile-menu a > svg { color: #5e7067; height: 17px; width: 17px; }
.profile-menu a > svg:last-child { height: 13px; width: 13px; }

.saved-drawer { inset: 0; pointer-events: none; position: fixed; z-index: 210; }
.saved-drawer-backdrop { background: rgba(14,28,22,.35); border: 0; inset: 0; opacity: 0; position: absolute; transition: opacity 220ms ease; width: 100%; }
.saved-drawer-panel { background: #fbfaf7; bottom: 0; box-shadow: -24px 0 70px rgba(15,31,24,.18); display: flex; flex-direction: column; max-width: 440px; position: absolute; right: 0; top: 0; transform: translateX(100%); transition: transform 260ms cubic-bezier(.22,.8,.25,1); width: 100%; }
.saved-drawer.is-open { pointer-events: auto; }
.saved-drawer.is-open .saved-drawer-backdrop { opacity: 1; }
.saved-drawer.is-open .saved-drawer-panel { transform: translateX(0); }
.saved-drawer-panel > header { align-items: center; border-bottom: 1px solid #dedfda; display: flex; justify-content: space-between; padding: 25px 24px 20px; }
.saved-drawer-panel > header span { color: #718078; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.saved-drawer-panel h2 { color: #18241f; font-family: "Instrument Serif", Georgia, serif; font-size: 34px; font-weight: 400; margin: 5px 0 0; }
.saved-drawer-close { align-items: center; background: transparent; border: 1px solid #d6d9d3; border-radius: 50%; display: flex; height: 38px; justify-content: center; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; width: 38px; }
.saved-drawer-close:hover { background: #eef1ed; border-color: #aeb8b1; transform: rotate(4deg); }
.saved-drawer-close svg { height: 17px; width: 17px; }
.saved-drawer-list { display: flex; flex: 1; flex-direction: column; gap: 12px; overflow-y: auto; padding: 20px 24px 30px; }
.saved-villa-card { background: #fff; border: 1px solid #dcddd8; display: grid; grid-template-columns: 1fr auto; position: relative; transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease; }
.saved-villa-card:hover { border-color: #bbc5be; box-shadow: 0 10px 24px rgba(18,39,31,.08); transform: translateY(-2px); }
.saved-villa-card > a { align-items: center; display: grid; gap: 13px; grid-template-columns: 112px 1fr; min-width: 0; padding: 8px 0 8px 8px; }
.saved-villa-card img { height: 92px; object-fit: cover; width: 112px; }
.saved-villa-card a > span { display: flex; flex-direction: column; min-width: 0; }
.saved-villa-card strong { color: #18241f; font-family: "Instrument Serif", Georgia, serif; font-size: 20px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-villa-card small { color: #6e7b74; font-size: 10px; line-height: 1.45; margin-top: 4px; }
.saved-villa-card b { color: #26362f; font-size: 11px; margin-top: 12px; }
.saved-villa-card b em { color: #7b8780; font-size: 9px; font-style: normal; font-weight: 400; }
.saved-villa-card > button { align-self: start; background: transparent; border: 0; color: #1e503c; margin: 10px 9px 0 0; padding: 5px; }
.saved-villa-card > button svg { fill: currentColor; height: 17px; width: 17px; }
.saved-empty { align-items: center; display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 35px 20px; text-align: center; }
.saved-empty > svg { color: #708178; height: 28px; width: 28px; }
.saved-empty h3 { font-family: "Instrument Serif", Georgia, serif; font-size: 26px; font-weight: 400; margin: 17px 0 6px; }
.saved-empty p { color: #748179; font-size: 12px; line-height: 1.65; margin: 0; max-width: 280px; }
.saved-empty button { background: #183027; border: 0; color: white; font-size: 12px; margin-top: 20px; padding: 12px 18px; }
.detail-header #detailSaveButton.is-saved { color: #1e5a42; }
.detail-header #detailSaveButton.is-saved svg { fill: currentColor; }

@media (max-width: 640px) {
  .profile-menu { position: fixed; right: 12px; top: 48px; width: min(270px, calc(100vw - 24px)); }
  .saved-drawer-panel { max-width: none; }
  .saved-drawer-panel > header { padding: 20px 18px 16px; }
  .saved-drawer-list { padding: 16px 14px 24px; }
  .saved-villa-card > a { gap: 10px; grid-template-columns: 96px 1fr; }
  .saved-villa-card img { height: 86px; width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-menu, .saved-drawer-backdrop, .saved-drawer-panel { transition: none; }
}