/* ── RESET ── */
.fav-overlay *, .fav-overlay *::before, .fav-overlay *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── OVERLAY ── */
.fav-overlay {
  position: fixed !important; inset: 0 !important; z-index: 9999999 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 16px !important;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.fav-overlay.fav-open { opacity: 1 !important; pointer-events: all !important; }

/* ── BACKDROP ── */
.fav-backdrop {
  position: absolute !important; inset: 0 !important;
  background: rgba(8, 18, 10, 0.50) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
}

/* ── PANEL ── */
.fav-panel {
  position: relative !important; z-index: 1!important;
  background: #ffffff !important;
  border-radius: 24px !important;
  width: 100% !important; max-width: 660px !important; max-height: 88vh !important;
  display: flex !important; flex-direction: column !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.08), 0 40px 80px rgba(0,0,0,0.16) !important;
  overflow: hidden !important;
  transform: translateY(28px) scale(0.97);
  transition: transform .34s cubic-bezier(.22,1,.36,1);
}
.fav-overlay.fav-open .fav-panel { transform: translateY(0) scale(1) !important; }

/* ── HEAD ── */
.fav-head {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 20px 22px 16px !important;
  border-bottom: 1.5px solid #f0f4f0 !important;
  flex-shrink: 0 !important;
}
.fav-head__left { display: flex !important; align-items: center !important; gap: 10px !important; }
.fav-head__title { font-family: 'Montserrat', sans-serif !important; font-size: 17px !important; font-weight: 700 !important; color: #111 !important; letter-spacing: -.2px !important; }
.fav-count {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 22px !important; height: 22px !important; padding: 0 6px !important;
  background: #eaf7ed !important; color: #22863a !important;
  font-size: 11px !important; font-weight: 700 !important; border-radius: 99px !important; line-height: 1 !important;
}
.fav-close {
  width: 34px !important; height: 34px !important; background: #f5f5f5 !important;
  border: none !important; border-radius: 9px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; color: #888 !important;
  transition: background .15s, color .15s !important;
}
.fav-close:hover { background: #ffe5e5 !important; color: #d32f2f !important; }

/* ── BODY ── */
.fav-body {
  flex: 1 !important; overflow-y: auto !important;
  padding: 14px 20px !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  overscroll-behavior: contain !important;
}
.fav-body::-webkit-scrollbar { width: 4px !important; }
.fav-body::-webkit-scrollbar-thumb { background: #c8e6cb !important; border-radius: 99px !important; }

/* ── CARD ── */
.fav-card {
  display: grid !important;
  grid-template-columns: 80px 1fr auto !important;
  gap: 12px !important; align-items: center !important;
  padding: 12px !important;
  background: #fafafa !important;
  border: 1.5px solid #efefef !important; border-radius: 16px !important;
  transition: border-color .18s, box-shadow .18s !important;
  animation: fav-slide-in .2s ease both !important;
}
.fav-card:hover { border-color: #b2dfdb !important; box-shadow: 0 3px 16px rgba(34,134,58,0.08) !important; }
@keyframes fav-slide-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* фото */
.fav-card__img {
  width: 80px !important; height: 80px !important;
  border-radius: 10px !important; overflow: hidden !important;
  background: #f0f4f0 !important; border: 1px solid #e8e8e8 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.fav-card__img img { width: 100% !important; height: 100% !important; object-fit: contain !important; }

/* инфо */
.fav-card__info { display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; }
.fav-card__title {
  font-size: 13px !important; font-weight: 600 !important; color: #111 !important;
  line-height: 1.35 !important; text-decoration: none !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; transition: color .15s !important;
}
.fav-card__title:hover { color: #22863a !important; text-decoration: underline !important; }
.fav-card__article { font-size: 11px !important; color: #bbb !important; font-weight: 500 !important; }
.fav-card__price { font-size: 16px !important; font-weight: 800 !important; color: #22863a !important; letter-spacing: -.3px !important; margin-top: 2px !important; }
.fav-card__old-price { font-size: 12px !important; color: #bbb !important; text-decoration: line-through !important; }

/* кнопки */
.fav-card__actions { display: flex !important; flex-direction: column !important; gap: 7px !important; align-items: center !important; flex-shrink: 0 !important; }
.fav-card__remove {
  width: 30px !important; height: 30px !important; background: #fff !important;
  border: 1.5px solid #ebebeb !important; border-radius: 8px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; color: #ccc !important;
  transition: all .15s !important;
}
.fav-card__remove:hover { background: #fff0f0 !important; border-color: #ffb3b3 !important; color: #e53935 !important; }
.fav-card__buy {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  background: #22863a !important; color: #fff !important; border: none !important;
  border-radius: 8px !important; padding: 6px 11px !important;
  font-size: 11px !important; font-weight: 700 !important; cursor: pointer !important;
  white-space: nowrap !important; text-decoration: none !important;
  transition: background .15s, transform .12s !important;
}
.fav-card__buy:hover { background: #1a6b2d !important; transform: translateY(-1px) !important; }

/* ── EMPTY ── */
.fav-empty {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  gap: 12px !important; padding: 52px 24px !important; text-align: center !important;
}
.fav-empty svg { opacity: .25 !important; }
.fav-empty__text { font-size: 15px !important; font-weight: 500 !important; color: #bbb !important; }
.fav-empty__sub { font-size: 12px !important; color: #d0d0d0 !important; max-width: 220px !important; line-height: 1.5 !important; }

/* ── FOOT ── */
.fav-foot {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 14px 20px !important; border-top: 1.5px solid #f0f4f0 !important;
  flex-shrink: 0 !important; gap: 10px !important;
}
.fav-btn {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 9px 18px !important; border-radius: 10px !important;
  font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important;
  border: none !important; transition: all .15s !important; white-space: nowrap !important;
}
.fav-btn--ghost { background: transparent !important; color: #bbb !important; border: 1.5px solid #e8e8e8 !important; }
.fav-btn--ghost:hover { background: #fff0f0 !important; border-color: #ffb3b3 !important; color: #e53935 !important; }
.fav-btn--solid { background: #22863a !important; color: #fff !important; margin-left: auto !important; }
.fav-btn--solid:hover { background: #1a6b2d !important; }

/* ── MOBILE SHEET ── */
@media (max-width: 768px) {
  .fav-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
  }
  .fav-panel {
    border-radius: 20px !important;
    max-height: 65vh !important; /* ← ИСПРАВЛЕНО: было calc(100vh - 32px) */
    width: 100% !important;
    max-width: 100% !important;
    transform: translateY(20px) scale(0.97) !important;
  }
  .fav-overlay.fav-open .fav-panel { transform: translateY(0) scale(1) !important; }
  .fav-card { grid-template-columns: 66px 1fr auto !important; }
  .fav-card__img { width: 66px !important; height: 66px !important; }
}