/* ============================================================
   NORIANA — Favourites page
   Grid of favourited product cards + empty state.
   (Shared tokens, nav, footer, cart, toast, .btn, .wrap/.sec-head,
   .reveal, etc. all live in style.css — not repeated here.)
   ============================================================ */

.products__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--section-pad)}

.pc{position:relative;display:flex;flex-direction:column}
.pc__media{border-radius:32px;position:relative;overflow:hidden;background:var(--secondary);margin-bottom:1rem;aspect-ratio:3/4}
.pc__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pc:hover .pc__media img{transform:scale(1.05)}
.pc__add{position:absolute;left:calc(.8rem + 48px);right:.8rem;bottom:.8rem;z-index:2;background:rgba(251,249,246,.95);color:var(--primary);padding:1rem;font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);backdrop-filter:blur(6px)}
.pc__add:hover{background:var(--primary);color:var(--bg)}
.pc:hover .pc__add{opacity:1;transform:none}
.pc__fav{position:absolute;left:.8rem;bottom:.8rem;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(251,249,246,.92);display:grid;place-items:center;color:var(--accent);backdrop-filter:blur(6px);transition:transform .3s var(--ease)}
.pc__fav:hover{transform:scale(1.08)}
.pc__fav svg{width:19px;height:19px;fill:var(--accent);stroke:var(--accent);stroke-width:1.6}
.pc__name{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.2;margin-bottom:.45rem}
.pc__price{font-size:1.08rem}

.fav-empty{padding:4rem 0;text-align:center;color:rgba(26,26,26,.55)}
.fav-empty .e-serif{font-family:var(--serif);font-style:italic;font-size:1.9rem;color:var(--primary);display:block;margin-bottom:.8rem}
.fav-empty .btn{margin-top:1.8rem}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1080px){
  .products__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .products__grid{grid-template-columns:1fr 1fr;gap:.9rem}
  .pc__add{opacity:1;transform:none;position:static;margin-top:.7rem;background:var(--primary);color:var(--bg)}
}