/* ═══ ИЗБРАННОЕ (wishlist.html и favorites.html — оба рендерят эти классы) ═══ */
.wl-page{ padding:var(--sp-10) var(--page-x) var(--sp-8); }
.wl-page a,
.wl-page a:hover,
.wl-page a:focus-visible{ text-decoration:none; }
@media (max-width:480px){ .wl-page{ padding-top:80px; } }
.wl-inner{ max-width:var(--container-page); margin:0 auto; }
.wl-hero{ margin-bottom:var(--sp-4); }
.wl-hero-title{
  font-size:clamp(1.5rem,3.4vw,2.4rem); font-weight:700; color:var(--text-hi);
  line-height:1.2; margin:var(--sp-1) 0 0; max-width:760px;
}
.wl-hero-sub{ color:var(--text-soft); margin-top:var(--sp-2); font-size:1.02rem; max-width:620px; }

/* ── Полоса выгоды: сколько сэкономит покупатель прямо сейчас ── */
.wl-savings{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid color-mix(in srgb, var(--success) 35%, transparent); border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--success) 5%, transparent);
  padding:14px var(--sp-3); margin-bottom:var(--sp-2);
  color:var(--text-soft); font-size:.94rem;
}
.wl-savings .ic{ width:20px; height:20px; color:var(--success); flex-shrink:0; }
.wl-savings b{ color:var(--success); font-variant-numeric:tabular-nums; }
.wl-savings-sort{ margin-left:auto; color:var(--cyan); text-decoration:none; font-size:.88rem; white-space:nowrap; }
.wl-savings-sort:hover{ text-decoration:underline; }

/* ── Управление: коллекции по категориям + сортировка ── */
.wl-controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3);
}
.wl-groups, .wl-sorts{ display:flex; gap:8px; flex-wrap:wrap; }
.wl-chip{
  display:inline-flex; align-items:center; height:var(--h-chip);
  padding:0 14px; border-radius:var(--r-pill); cursor:pointer;
  border:1px solid var(--line); background:transparent;
  color:var(--text-dim); font-size:.84rem; font-family:var(--font-body);
  text-decoration:none; transition:border-color .2s, color .2s;
}
.wl-chip:hover{ color:var(--text-hi); }
.wl-chip.is-active{ border-color:var(--cyan); color:var(--cyan); }
.wl-sorts .wl-chip.is-active{ background:var(--cyan-a07); }

.wl-banner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap;
  background:var(--cyan-a07);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-4);
}
.wl-banner-text strong{ color:var(--text-hi); display:block; font-size:1.02rem; }
.wl-banner-text span{ color:var(--text-soft); font-size:.9rem; }
.wl-banner-btn{
  display:inline-flex; align-items:center; min-height:var(--h-btn-sm);
  border:1px solid var(--cyan); background:transparent; color:var(--cyan);
  padding:0 var(--sp-3); border-radius:var(--r-sm); cursor:pointer; font-weight:600;
  white-space:nowrap; transition:background .2s,color .2s;
}
.wl-banner-btn:hover{ background:var(--cyan); color:var(--cta-ink); }
.wl-banner-btn.is-on{ background:color-mix(in srgb, var(--success) 14%, transparent); border-color:var(--success); color:var(--success); }

.wl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
@media (max-width:900px){ .wl-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .wl-grid{ grid-template-columns:1fr; } }

.wl-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  transition:transform .2s, border-color .2s;
}
.wl-card:hover{ transform:translateY(-3px); border-color:var(--cyan-a35); }
.wl-card.is-out{ opacity:.62; }
.wl-badge{
  position:absolute; top:var(--sp-1); left:var(--sp-1); z-index:2;
  font-size:.72rem; font-weight:700; padding:var(--sp-0) var(--sp-1); border-radius:var(--r-sm);
}
.wl-badge--drop{ background:color-mix(in srgb, var(--success) 16%, transparent); color:var(--success); border:1px solid color-mix(in srgb, var(--success) 40%, transparent); }
.wl-card-media{ display:block; aspect-ratio:1/1; background:var(--pure-white); padding:var(--sp-2); }
.wl-card-media img{ width:100%; height:100%; object-fit:contain; }
.wl-card-ph{ display:flex; align-items:center; justify-content:center; height:100%; }
.wl-card-ph .ic{ width:64px; height:64px; color:var(--steel); }
.wl-card-body{ display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-2); flex:1; }
.wl-card-tags{ display:flex; align-items:center; gap:8px; }
.wl-card-brand{ font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.wl-card-group{ font-size:.72rem; color:var(--text-faint); }
.wl-card-name{ color:var(--text-hi); font-weight:600; line-height:1.32; text-decoration:none; }
.wl-card-name:hover{ color:var(--cyan); }
.wl-card-price{ margin-top:auto; display:flex; align-items:baseline; gap:var(--sp-1); flex-wrap:wrap; }
.wl-card-price strong{ font-size:1.25rem; color:var(--text-hi); }
.wl-card-price strong span{ font-size:.85rem; color:var(--text-soft); font-weight:400; }
.wl-price-old{ color:var(--text-faint); text-decoration:line-through; font-size:.85rem; }
.wl-card-actions{ display:flex; align-items:center; gap:var(--sp-1); margin-top:var(--sp-1); }
.wl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-1); cursor:pointer;
  border-radius:var(--r-sm); font-weight:600; transition:background .2s,color .2s,transform .15s; }
.wl-btn--cart{ flex:1; min-height:var(--h-btn-sm); background:var(--cyan); color:var(--cta-ink); border:none; padding:0 var(--sp-2); }
.wl-btn--cart .ic{ width:17px; height:17px; }
.wl-btn--cart:hover{ background:var(--cyan-300); }
.wl-btn--cart.is-loading{ opacity:.6; }
.wl-btn--cart.is-added{ background:var(--success); }
.wl-btn--ico{ width:var(--tap-min); height:var(--tap-min); flex-shrink:0; background:transparent; border:1px solid var(--line); color:var(--text-soft); }
.wl-btn--ico svg{ width:16px; height:16px; }
.wl-btn--remove:hover{ border-color:var(--danger); color:var(--danger); }
/* «Сравнить» — глобальный AJAX-хук .pcard-compare из main.js; is-on = уже в сравнении */
.wl-btn.pcard-compare:hover{ border-color:var(--cyan-a50); color:var(--cyan); }
.wl-btn.pcard-compare.is-on{ border-color:var(--cyan); color:var(--cyan); background:var(--cyan-a10); }
.wl-btn.pcard-compare.is-loading{ opacity:.5; }
.wl-out-note{ flex:1; font-size:.85rem; color:var(--text-soft); }
.wl-out-note a{ color:var(--cyan); }
.wl-notify-form{ display:flex; align-items:baseline; gap:5px; margin:0; }
.wl-out-note button{ background:none; border:none; padding:0; font:inherit; color:var(--cyan); cursor:pointer; }
.wl-out-note button:hover{ text-decoration:underline; }
.wl-remove-form{ margin:0; }