/* ============================================================
   favourites.css — Flex Europa · finaldesign
   Saved products (§3.2a).

   REUSE: .page-head, .breadcrumb, .product-grid, .showcase-card,
   .fav-btn, .results__state and the skeleton shimmer are all existing
   components. This file adds only the card's own toggle placement and
   the list's head row — nothing else is new.
   ============================================================ */

.favourites { padding-block: var(--space-2xl) var(--space-3xl); }

.favourites__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  margin-block-end: var(--space-lg);
  padding-block-end: var(--space-md);
  border-block-end: var(--hairline);
}
.favourites__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Loading: the grid's own geometry, so nothing shifts when the real
   cards land. .skeleton-block carries the shimmer from components.css. */
.favourites__skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.favourites__skeleton .skeleton-block { aspect-ratio: 5 / 4; }

/* The skeleton reserves exactly ONE grid row, at whatever the column count
   is — so it drops cells as the grid narrows rather than stacking three
   card-heights on a phone. Three stacked cells reserved ~950px against an
   empty list's ~300px, and the collapse when the answer came back was a
   0.15 layout shift. */
@media (max-width: 1279px) {
  .favourites__skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .favourites__skeleton .skeleton-block:nth-child(3) { display: none; }
}
@media (max-width: 575px) {
  .favourites__skeleton { grid-template-columns: minmax(0, 1fr); }
  .favourites__skeleton .skeleton-block:nth-child(n+2) { display: none; }
}