@import url("profile.css");

main {
  min-height: calc(100vh - 64px);
  padding-inline: calc(clamp(16px, 6vw, 110px) + clamp(16px, 1.8vw, 22px));
}
.favorites-content { width: 100%; max-width: none; margin: 0; padding-block: var(--sp-6) 56px; }
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  min-height: 280px;
}
.favorite-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); box-shadow: var(--pp-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.favorite-card:hover, .favorite-card:focus-within { border-color: #8bb9e8; box-shadow: 0 18px 40px rgba(var(--pp-navy-rgb), .16); transform: translateY(-6px); }
.favorite-card__media { position: relative; display: grid; width: 100%; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; padding: 10px 16px; background: var(--pp-surface-muted); }
.favorite-card__media img { display: block; width: auto; height: auto; max-width: 88%; max-height: 100%; object-fit: contain; }
.favorite-remove { position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-end: 10px; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; color: var(--pp-danger); background: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; font-size: 21px; transition: color .18s ease, transform .18s ease, filter .18s ease; }
.favorite-remove:hover, .favorite-remove:focus-visible { color: var(--pp-danger); background: transparent; outline: 0; box-shadow: none; filter: drop-shadow(0 0 3px rgb(220 38 38 / 28%)); transform: scale(1.12); }
.favorite-card__body { display: flex; flex: 1; flex-direction: column; padding: 14px; }
.favorite-card__body h2 { margin: 0; color: var(--pp-text-strong); font-size: 1.05rem; line-height: 1.5; }
.favorite-card__body p { min-height: 46px; margin: 3px 0 10px; color: var(--pp-text-muted); font-size: .86rem; }
.favorite-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-block-start: auto; color: var(--pp-text-body); font-size: .82rem; }
.favorite-meta strong { color: var(--pp-primary); font-size: 1rem; }
.favorite-preview { width: 100%; min-height: 0; margin-block-start: 12px; padding: 9px 12px; border-radius: 10px; font-size: .9rem; }

.favorites-empty { min-height: 535px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px 16px 48px; text-align: center; }
.favorites-empty[hidden], .favorites-suggestions[hidden], .favorites-grid[hidden] { display: none; }
.favorites-empty__visual { position: relative; width: 270px; height: 220px; }
.heart-card { position: absolute; display: grid; place-items: center; width: 76px; height: 76px; color: var(--pp-primary); background: #fff; border: 2px solid var(--pp-blue-100); border-radius: 20px; box-shadow: 0 12px 28px rgba(var(--pp-blue-rgb), .16); font-size: 2rem; }
.heart-card--back { inset-block-start: 24px; inset-inline-start: 24px; opacity: .7; transform: rotate(-13deg); }
.heart-card--front { inset-block-start: 4px; inset-inline-end: 22px; transform: rotate(11deg); }
.empty-heart { position: absolute; inset-block-end: 5px; inset-inline-start: 50%; display: grid; width: 142px; height: 126px; place-items: center; color: var(--pp-primary); background: linear-gradient(145deg, #dceaff, #86b2f9); border: 5px solid #fff; border-radius: 46% 46% 42% 42%; box-shadow: 0 18px 34px rgba(var(--pp-blue-rgb), .22); transform: translateX(50%); font-size: 4.2rem; }
.empty-heart::after { content: ""; position: absolute; inset-block-end: -18px; width: 120px; height: 18px; background: rgba(var(--pp-navy-rgb), .1); border-radius: 50%; filter: blur(7px); }
.favorites-empty h2 { margin: 4px 0 10px; color: var(--pp-text-strong); font-size: clamp(1.8rem, 3vw, 2.35rem); }
.favorites-empty p { margin: 0; color: var(--pp-text-muted); font-size: 1.05rem; line-height: 1.9; }
.browse-favorites { min-width: 330px; min-height: 58px; margin-block-start: 26px; gap: 18px; border-radius: 12px; }
.favorites-suggestions { padding-block-start: 28px; border-block-start: 1px solid var(--pp-border); }
.favorites-suggestions__heading h2 { margin: 0; color: var(--pp-text-strong); font-size: 1.5rem; }
.favorites-suggestions__heading p { margin: 2px 0 16px; color: var(--pp-text-muted); }
.favorites-suggestions__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.favorite-suggestion { min-height: 156px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 14px; text-align: center; background: #fff; border: 1px solid var(--pp-border); border-radius: 15px; box-shadow: var(--pp-shadow-sm); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.favorite-suggestion:hover { border-color: var(--pp-primary-border); box-shadow: 0 9px 22px rgba(var(--pp-navy-rgb), .09); transform: translateY(-3px); }
.favorite-suggestion span { display: grid; width: 64px; height: 64px; place-items: center; color: #397cd9; background: #e7f0ff; border-radius: 50%; font-size: 1.9rem; }
.favorite-suggestion--coral span { color: #d94f4f; background: #fff0ed; }
.favorite-suggestion--cyan span { color: #12aeb5; background: #e4fbf8; }
.favorite-suggestion--violet span { color: #5b5ed9; background: #efefff; }
.favorite-suggestion strong { margin-block-start: 8px; color: var(--pp-text-strong); }
.favorite-suggestion small { color: var(--pp-text-muted); }

@keyframes favoriteCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: no-preference) {
  .favorites-motion-ready .favorite-card { opacity: 0; transform: translateY(26px); transition: opacity 520ms ease, transform 680ms cubic-bezier(.16, 1, .3, 1), border-color .2s ease, box-shadow .2s ease; }
  .favorites-motion-ready .favorite-card.is-revealed { opacity: 1; transform: none; }
  .favorites-motion-ready .favorite-card.is-floating { animation: favoriteCardFloat 4.8s ease-in-out infinite; }
  .favorites-motion-ready .favorite-card.is-floating:nth-child(3n + 1) { animation-delay: 0s; }
  .favorites-motion-ready .favorite-card.is-floating:nth-child(3n + 2) { animation-delay: .7s; }
  .favorites-motion-ready .favorite-card.is-floating:nth-child(3n) { animation-delay: 1.3s; }
  .favorites-motion-ready .favorite-card.is-floating:hover, .favorites-motion-ready .favorite-card.is-floating:focus-within { animation-play-state: paused; transform: translateY(-6px); }
}

@media (max-width: 1250px) { .favorites-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .favorites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { main { padding-inline: 16px; } }
@media (max-width: 820px) { .favorites-suggestions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .favorites-content .page-heading h1 { margin: 4px 0 2px; font-size: 1.4rem; line-height: 1.3; } .favorites-content .page-heading p { margin: 0; font-size: .85rem; line-height: 1.6; } }
@media (max-width: 620px) { .favorites-content { padding-block: var(--sp-5); } .favorites-grid { grid-template-columns: 1fr; gap: var(--sp-4); min-height: 180px; } .favorites-empty { min-height: 470px; padding-inline: 0; } .favorites-empty__visual { width: 220px; height: 190px; transform: scale(.88); } .favorites-empty h2 { font-size: 1.55rem; } .favorites-empty p { font-size: .9rem; } .browse-favorites { width: min(100%, 240px); min-width: 0; } .favorites-suggestions__grid { gap: 9px; } .favorite-suggestion { min-height: 140px; padding: 14px 8px; } .favorite-suggestion small { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .favorite-card { transition: none; } .favorite-card:hover { transform: none; } }