/* frontend/css/feed.css
   Reusable progressive product feed: skeleton cards + Load More / Retry controls.
   Additive only — defines new classes, overrides nothing. Var fallbacks keep it
   working in any store (NOOS / DomDom) regardless of which CSS vars are defined. */

/* ── SKELETON SHIMMER ─────────────────────────────────────────────────────── */
@keyframes feedShimmer { 0% { background-position:-520px 0 } 100% { background-position:520px 0 } }

.skeleton{
  background:#ececec;
  background-image:linear-gradient(90deg,#ececec 0,#f6f6f6 40px,#ececec 80px);
  background-size:600px 100%;
  animation:feedShimmer 1.4s ease-in-out infinite;
  border-radius:6px;
}
@media (prefers-reduced-motion:reduce){ .skeleton{ animation:none } }

/* Skeleton card mirrors a real product card's footprint (it reuses .product-card). */
.skeleton-card{ pointer-events:none }
.skeleton-card .skeleton-img{ aspect-ratio:1; width:100%; border-radius:0 }
.skeleton-line{ height:12px; margin-bottom:.5rem }
.skeleton-line-sm{ width:40% }
.skeleton-line-lg{ width:85%; height:16px }
.skeleton-line-md{ width:60% }
.skeleton-line-price{ width:70px; height:18px; margin:0 }
.skeleton-pill{ width:62px; height:30px; border-radius:999px }

/* Match the list-view card layout so skeletons line up there too. */
.products-grid.list-view .skeleton-card{ display:grid; grid-template-columns:200px 1fr }
.products-grid.list-view .skeleton-card .skeleton-img{ max-height:200px }

/* ── FEED CONTROLS (live OUTSIDE the grid) ────────────────────────────────── */
.feed-controls{
  display:flex; flex-direction:column; align-items:center;
  gap:1rem; margin-top:2rem; min-height:1px;
}
.feed-load-more{
  padding:.7rem 2.2rem;
  background:var(--charcoal,#2b2b2b); color:#fff;
  border:none; border-radius:999px;
  font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:500;
  cursor:pointer; transition:background .2s,transform .2s;
}
.feed-load-more:hover{ background:var(--rose,#c98b8b); transform:translateY(-1px) }

.feed-error{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color:var(--muted,#777); font-size:.9rem; text-align:center;
}
.feed-retry{
  padding:.5rem 1.5rem;
  background:var(--rose-light,#f4e3e3); color:var(--rose-dark,#9b4a4a);
  border:none; border-radius:999px;
  font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:500;
  cursor:pointer; transition:background .2s,color .2s;
}
.feed-retry:hover{ background:var(--rose,#c98b8b); color:#fff }

/* The IntersectionObserver target — invisible, just needs to exist in flow. */
.feed-sentinel{ width:100%; height:1px }

.feed-load-more[hidden], .feed-error[hidden]{ display:none }